@guardian/stand 0.0.24 → 0.0.26

package/dist/alert-banner.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var AlertBanner = require('./components/alert-banner/AlertBanner.cjs');
+var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
+
+
+
+exports.AlertBanner = AlertBanner.AlertBanner;
+exports.componentAlertBanner = alertBanner.componentAlertBanner;

package/dist/alert-banner.js

@@ -0,0 +1,2 @@
+export { AlertBanner } from './components/alert-banner/AlertBanner.js';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';

package/dist/components/alert-banner/AlertBanner.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+var Icon = require('../icon/Icon.cjs');
+var IconButton = require('../icon-button/IconButton.cjs');
+
+function AlertBanner({
+  level,
+  showIcon = false,
+  icon,
+  closeButtonProps,
+  children,
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAlertBannerTheme, theme);
+  const determinedIcon = React.useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    switch (level) {
+      case "error":
+        return "warning";
+      case "success":
+        return "sentiment_satisfied";
+      case "warning":
+        return "flag";
+      case "information":
+      default:
+        return "info";
+    }
+  }, [icon, level]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      css: [styles.alertBannerStyles(mergedTheme, { level }), cssOverrides],
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.alertBannerContentStyles(mergedTheme), children: [
+          showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "md", fill: mergedTheme.shared.content.icon.color, children: determinedIcon }),
+          children
+        ] }),
+        closeButtonProps && /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.IconButton,
+          {
+            variant: "tertiary",
+            size: "xs",
+            symbol: "close",
+            ariaLabel: "Close alert banner",
+            ...closeButtonProps
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.AlertBanner = AlertBanner;

package/dist/components/alert-banner/AlertBanner.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useMemo } from 'react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme } from './styles.js';
+import { Icon } from '../icon/Icon.js';
+import { IconButton } from '../icon-button/IconButton.js';
+
+function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultAlertBannerTheme, theme);
+  const determinedIcon = useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    switch (level) {
+      case "error":
+        return "warning";
+      case "success":
+        return "sentiment_satisfied";
+      case "warning":
+        return "flag";
+      case "information":
+      default:
+        return "info";
+    }
+  }, [icon, level]);
+  return jsxs("div", { css: [alertBannerStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [jsxs("div", { css: alertBannerContentStyles(mergedTheme), children: [showIcon && jsx(Icon, { size: "md", fill: mergedTheme.shared.content.icon.color, children: determinedIcon }), children] }), closeButtonProps && jsx(IconButton, { variant: "tertiary", size: "xs", symbol: "close", ariaLabel: "Close alert banner", ...closeButtonProps })] });
+}
+
+export { AlertBanner };

package/dist/components/alert-banner/styles.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var react = require('@emotion/react');
+var alertBanner = require('../../styleD/build/typescript/component/alertBanner.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultAlertBannerTheme = alertBanner.componentAlertBanner;
+const alertBannerStyles = (theme, { level }) => {
+  return react.css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		justify-content: ${theme.shared["justify-content"]};
+		width: ${theme.shared.width};
+		height: ${theme.shared.height};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		background-color: ${theme[level]["background-color"]};
+	`;
+};
+const alertBannerContentStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.content.display};
+		justify-content: ${theme.shared.content["justify-content"]};
+		gap: ${theme.shared.content.gap};
+		height: ${theme.shared.content.height};
+		align-items: ${theme.shared.content["align-items"]};
+		flex: ${theme.shared.content.flex};
+		color: ${theme.shared.content.color};
+		${typography.convertTypographyToEmotionStringStyle(theme.shared.content.typography)}
+	`;
+};
+
+exports.alertBannerContentStyles = alertBannerContentStyles;
+exports.alertBannerStyles = alertBannerStyles;
+exports.defaultAlertBannerTheme = defaultAlertBannerTheme;

package/dist/components/alert-banner/styles.js

@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+import { componentAlertBanner } from '../../styleD/build/typescript/component/alertBanner.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultAlertBannerTheme = componentAlertBanner;
+const alertBannerStyles = (theme, { level }) => {
+  return css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		justify-content: ${theme.shared["justify-content"]};
+		width: ${theme.shared.width};
+		height: ${theme.shared.height};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		background-color: ${theme[level]["background-color"]};
+	`;
+};
+const alertBannerContentStyles = (theme) => {
+  return css`
+		display: ${theme.shared.content.display};
+		justify-content: ${theme.shared.content["justify-content"]};
+		gap: ${theme.shared.content.gap};
+		height: ${theme.shared.content.height};
+		align-items: ${theme.shared.content["align-items"]};
+		flex: ${theme.shared.content.flex};
+		color: ${theme.shared.content.color};
+		${convertTypographyToEmotionStringStyle(theme.shared.content.typography)}
+	`;
+};
+
+export { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme };

package/dist/components/menu/styles.cjs

@@ -74,7 +74,6 @@ const menuItemLabelStyles = (theme) => react.css`
 	grid-area: ${theme.shared.label["grid-area"]};
 	color: ${theme.shared.label.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
-	)}
 `;
 const menuItemDescriptionStyles = (theme) => react.css`
 	grid-area: ${theme.shared.description["grid-area"]};

package/dist/components/menu/styles.js

@@ -72,7 +72,6 @@ const menuItemLabelStyles = (theme) => css`
 	grid-area: ${theme.shared.label["grid-area"]};
 	color: ${theme.shared.label.color};
 	${convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
-	)}
 `;
 const menuItemDescriptionStyles = (theme) => css`
 	grid-area: ${theme.shared.description["grid-area"]};

package/dist/components/topbar/TopBar.cjs

@@ -11,7 +11,8 @@ var TopBarToolName = require('./topBarToolName/TopBarToolName.cjs');
 
 function TopBarSide({
   children,
-  alignment
+  alignment,
+  theme
 }) {
   const items = [];
   React.Children.forEach(children, (child, i) => {
@@ -22,6 +23,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
+          theme: theme?.Item,
           alignment
         })
       );
@@ -30,6 +32,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
+          theme: theme?.Navigation,
           alignment
         })
       );
@@ -38,14 +41,16 @@ function TopBarSide({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
 }
 function TopBarContainerRight({
-  children
+  children,
+  theme
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", theme, children });
 }
 function TopBarContainerLeft({
-  children
+  children,
+  theme
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", theme, children });
 }
 function TopBar({
   children,
@@ -64,16 +69,25 @@ function TopBar({
       return;
     }
     if (child.type === TopBarToolName.TopBarToolName) {
-      toolName ?? (toolName = child);
+      toolName ?? (toolName = React.cloneElement(
+        child,
+        { theme: mergedTheme.ToolName }
+      ));
     }
     if (child.type === Avatar.Avatar) {
-      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "right", children: child }));
+      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = child);
+      leftSide ?? (leftSide = React.cloneElement(
+        child,
+        { theme: mergedTheme }
+      ));
     }
     if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = child);
+      rightSide ?? (rightSide = React.cloneElement(
+        child,
+        { theme: mergedTheme }
+      ));
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/components/topbar/TopBar.js

@@ -7,7 +7,7 @@ import { TopBarItem } from './topBarItem/TopBarItem.js';
 import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
 import { TopBarToolName } from './topBarToolName/TopBarToolName.js';
 
-function TopBarSide({ children, alignment }) {
+function TopBarSide({ children, alignment, theme }) {
   const items = [];
   React.Children.forEach(children, (child, i) => {
     if (!React.isValidElement(child)) {
@@ -16,23 +16,25 @@ function TopBarSide({ children, alignment }) {
     if (child.type === TopBarItem) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
+        theme: theme?.Item,
         alignment
       }));
     }
     if (child.type === TopBarNavigation) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
+        theme: theme?.Navigation,
         alignment
       }));
     }
   });
   return jsx(Fragment, { children: items });
 }
-function TopBarContainerRight({ children }) {
-  return jsx(TopBarSide, { alignment: "right", children });
+function TopBarContainerRight({ children, theme }) {
+  return jsx(TopBarSide, { alignment: "right", theme, children });
 }
-function TopBarContainerLeft({ children }) {
-  return jsx(TopBarSide, { alignment: "left", children });
+function TopBarContainerLeft({ children, theme }) {
+  return jsx(TopBarSide, { alignment: "left", theme, children });
 }
 function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarTheme, theme);
@@ -45,16 +47,16 @@ function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
       return;
     }
     if (child.type === TopBarToolName) {
-      toolName ?? (toolName = child);
+      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.ToolName }));
     }
     if (child.type === Avatar) {
-      avatar ?? (avatar = jsx(TopBarItem, { alignment: "right", children: child }));
+      avatar ?? (avatar = jsx(TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = child);
+      leftSide ?? (leftSide = React.cloneElement(child, { theme: mergedTheme }));
     }
     if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = child);
+      rightSide ?? (rightSide = React.cloneElement(child, { theme: mergedTheme }));
     }
   });
   return jsxs("div", { css: [topBarStyles(mergedTheme), cssOverrides], className, ...props, children: [jsxs("div", { css: topBarContainerLeftStyles(mergedTheme), children: [toolName, leftSide] }), jsxs("div", { css: topBarContainerRightStyles(mergedTheme), children: [rightSide, avatar] })] });

package/dist/components/topbar/topBarToolName/styles.cjs

@@ -47,6 +47,7 @@ const toolNameStyles = (theme) => {
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.gap};
+		color: ${theme.color};
 	`;
 };
 const toolNameTypography = (theme) => {

package/dist/components/topbar/topBarToolName/styles.js

@@ -45,6 +45,7 @@ const toolNameStyles = (theme) => {
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.gap};
+		color: ${theme.color};
 	`;
 };
 const toolNameTypography = (theme) => {

package/dist/index.cjs

@@ -9,6 +9,7 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
@@ -39,6 +40,7 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;
 exports.componentCheckbox = checkbox.componentCheckbox;
 exports.componentTextArea = textArea.componentTextArea;

package/dist/index.js

@@ -7,6 +7,7 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.js';

package/dist/styleD/build/css/component/TopBar.css

@@ -58,6 +58,7 @@
 	--component-top-bar-navigation-sm-typography-letter-spacing: -0.0125rem;
 	--component-top-bar-navigation-sm-typography-font-width: 95;
 	--component-top-bar-tool-name-display: flex;
+	--component-top-bar-tool-name-color: #000000;
 	--component-top-bar-tool-name-align-items: center;
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15

package/dist/styleD/build/css/component/alertBanner.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-alert-banner-shared-display: flex;
+	--component-alert-banner-shared-align-items: center;
+	--component-alert-banner-shared-justify-content: space-between;
+	--component-alert-banner-shared-padding-top: 0;
+	--component-alert-banner-shared-padding-right: 1rem;
+	--component-alert-banner-shared-padding-bottom: 0;
+	--component-alert-banner-shared-padding-left: 1rem;
+	--component-alert-banner-shared-width: 100%;
+	--component-alert-banner-shared-height: 2.5rem;
+	--component-alert-banner-shared-content-display: flex;
+	--component-alert-banner-shared-content-justify-content: center;
+	--component-alert-banner-shared-content-gap: 0.5rem;
+	--component-alert-banner-shared-content-flex: 1;
+	--component-alert-banner-shared-content-height: 100%;
+	--component-alert-banner-shared-content-align-items: center;
+	--component-alert-banner-shared-content-color: #000000;
+	--component-alert-banner-shared-content-typography-font: normal 460
+		0.875rem/1.3 'Open Sans';
+	--component-alert-banner-shared-content-typography-letter-spacing: 0;
+	--component-alert-banner-shared-content-typography-font-width: 95;
+	--component-alert-banner-shared-content-icon-color: #545454;
+	--component-alert-banner-information-background-color: #e8f0fb;
+	--component-alert-banner-success-background-color: #cde4c9;
+	--component-alert-banner-warning-background-color: #fbeebf;
+	--component-alert-banner-error-background-color: #f5c6c0;
+}

package/dist/styleD/build/css/component/radioGroup.css

@@ -28,7 +28,7 @@
 	--component-radio-group-shared-indicator-disabled-border: 0.0625rem solid
 		#dcdcdc;
 	--component-radio-group-shared-indicator-selected-after-background-color: #005d8b;
-	--component-radio-group-shared-indicator-selected-after-scale: 0.6rem;
+	--component-radio-group-shared-indicator-selected-after-scale: 0.6;
 	--component-radio-group-shared-indicator-selected-border: 0.125rem solid
 		#0072a9;
 	--component-radio-group-shared-indicator-selected-invalid-border: 0.125rem

package/dist/styleD/build/typescript/component/TopBar.cjs

@@ -97,6 +97,7 @@ const componentTopBar = {
   },
   ToolName: {
     display: "flex",
+    color: "#000000",
     "align-items": "center",
     gap: "8px",
     typography: {

package/dist/styleD/build/typescript/component/TopBar.js

@@ -95,6 +95,7 @@ const componentTopBar = {
   },
   ToolName: {
     display: "flex",
+    color: "#000000",
     "align-items": "center",
     gap: "8px",
     typography: {

package/dist/styleD/build/typescript/component/alertBanner.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+const componentAlertBanner = {
+  shared: {
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "space-between",
+    padding: {
+      top: "0",
+      right: "1rem",
+      bottom: "0",
+      left: "1rem"
+    },
+    width: "100%",
+    height: "2.5rem",
+    content: {
+      display: "flex",
+      "justify-content": "center",
+      gap: "0.5rem",
+      flex: "1",
+      height: "100%",
+      "align-items": "center",
+      color: "#000000",
+      typography: {
+        font: "normal 460 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      icon: {
+        color: "#545454"
+      }
+    }
+  },
+  information: {
+    "background-color": "#e8f0fb"
+  },
+  success: {
+    "background-color": "#cde4c9"
+  },
+  warning: {
+    "background-color": "#fbeebf"
+  },
+  error: {
+    "background-color": "#f5c6c0"
+  }
+};
+
+exports.componentAlertBanner = componentAlertBanner;

package/dist/styleD/build/typescript/component/alertBanner.js

@@ -0,0 +1,46 @@
+const componentAlertBanner = {
+  shared: {
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "space-between",
+    padding: {
+      top: "0",
+      right: "1rem",
+      bottom: "0",
+      left: "1rem"
+    },
+    width: "100%",
+    height: "2.5rem",
+    content: {
+      display: "flex",
+      "justify-content": "center",
+      gap: "0.5rem",
+      flex: "1",
+      height: "100%",
+      "align-items": "center",
+      color: "#000000",
+      typography: {
+        font: "normal 460 0.875rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      icon: {
+        color: "#545454"
+      }
+    }
+  },
+  information: {
+    "background-color": "#e8f0fb"
+  },
+  success: {
+    "background-color": "#cde4c9"
+  },
+  warning: {
+    "background-color": "#fbeebf"
+  },
+  error: {
+    "background-color": "#f5c6c0"
+  }
+};
+
+export { componentAlertBanner };

package/dist/styleD/build/typescript/component/radioGroup.cjs

@@ -41,7 +41,7 @@ const componentRadioGroup = {
       selected: {
         after: {
           backgroundColor: "#005d8b",
-          scale: "0.6"
+          scale: 0.6
         },
         border: "0.125rem solid #0072a9",
         invalid: {

package/dist/styleD/build/typescript/component/radioGroup.js

@@ -39,7 +39,7 @@ const componentRadioGroup = {
       selected: {
         after: {
           backgroundColor: "#005d8b",
-          scale: "0.6"
+          scale: 0.6
         },
         border: "0.125rem solid #0072a9",
         invalid: {

package/dist/types/alert-banner.d.ts

@@ -0,0 +1,19 @@
+/**
+ * AlertBanner component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/alertBanner.css),
+ * you don't need to install these.
+ */
+export { AlertBanner } from './components/alert-banner/AlertBanner';
+export type { AlertBannerProps } from './components/alert-banner/types';
+export type { AlertBannerTheme } from './components/alert-banner/styles';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
+export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';

package/dist/types/components/alert-banner/AlertBanner.d.ts

@@ -0,0 +1,2 @@
+import type { AlertBannerProps } from './types';
+export declare function AlertBanner({ level, showIcon, icon, closeButtonProps, children, theme, cssOverrides, className, ...props }: AlertBannerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/alert-banner/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "AlertBanner";
+export declare const componentTsx = "import { AlertBanner } from '@guardian/stand/alert-banner';\n\nexport const Component = () => (\n\t<>\n\t\t<AlertBanner level=\"information\">\n\t\t\tYou are working in the CODE Environment\n\t\t</AlertBanner>\n\t\t<AlertBanner level=\"success\" showIcon>\n\t\t\tYour changes have been published.\n\t\t</AlertBanner>\n\t\t<AlertBanner\n\t\t\tlevel=\"error\"\n\t\t\tshowIcon\n\t\t\tcloseButtonProps={{ onPress: () => alert('Dismissed') }}\n\t\t>\n\t\t\tUnable to save changes.\n\t\t</AlertBanner>\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the alertbanner styles */\n@import '@guardian/stand/component/alertBanner.css';\n\n.stand-alert-banner {\n\tdisplay: var(--component-alert-banner-shared-display);\n\talign-items: var(--component-alert-banner-shared-align-items);\n\tjustify-content: var(--component-alert-banner-shared-justify-content);\n\tpadding: var(--component-alert-banner-shared-padding-top)\n\t\tvar(--component-alert-banner-shared-padding-right)\n\t\tvar(--component-alert-banner-shared-padding-bottom)\n\t\tvar(--component-alert-banner-shared-padding-left);\n\twidth: var(--component-alert-banner-shared-width);\n\theight: var(--component-alert-banner-shared-height);\n}\n\n.stand-alert-banner-content {\n\tdisplay: var(--component-alert-banner-shared-content-display);\n\tjustify-content: var(--component-alert-banner-shared-content-justify-content);\n\tgap: var(--component-alert-banner-shared-content-gap);\n\tflex: var(--component-alert-banner-shared-content-flex);\n\theight: var(--component-alert-banner-shared-content-height);\n\talign-items: var(--component-alert-banner-shared-content-align-items);\n\tcolor: var(--component-alert-banner-shared-content-color);\n\tfont: var(--component-alert-banner-shared-content-typography-font);\n\tletter-spacing: var(--component-alert-banner-shared-content-typography-letter-spacing);\n\tfont-variation-settings: 'wdth'\n\t\tvar(--component-alert-banner-shared-content-typography-font-width);\n}\n\n.stand-alert-banner-content > .material-symbols {\n\tfont-size: 1rem;\n\tcolor: var(--component-alert-banner-shared-content-icon-color);\n}\n\n.stand-alert-banner-information {\n\tbackground-color: var(--component-alert-banner-information-background-color);\n}\n\n.stand-alert-banner-success {\n\tbackground-color: var(--component-alert-banner-success-background-color);\n}\n\n.stand-alert-banner-warning {\n\tbackground-color: var(--component-alert-banner-warning-background-color);\n}\n\n.stand-alert-banner-error {\n\tbackground-color: var(--component-alert-banner-error-background-color);\n}\n\n/* see IconButton for example of styling close button */\n.stand-alert-banner-close {\n\tborder: 0;\n\tbackground: transparent;\n\tcursor: pointer;\n\tpadding: 0.125rem;\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-alert-banner stand-alert-banner-information\">\n\t\t<div class=\"stand-alert-banner-content\">\n\t\t\tYou are working in the CODE Environment\n\t\t</div>\n\t</div>\n\n\t<div class=\"stand-alert-banner stand-alert-banner-success\">\n\t\t<div class=\"stand-alert-banner-content\">\n\t\t\t<span class=\"material-symbols\">sentiment_satisfied</span>\n\t\t\tYour changes have been published.\n\t\t</div>\n\t</div>\n\n\t<div class=\"stand-alert-banner stand-alert-banner-error\">\n\t\t<div class=\"stand-alert-banner-content\">\n\t\t\t<span class=\"material-symbols\">warning</span>\n\t\t\tUnable to save changes.\n\t\t</div>\n\t\t<button class=\"stand-alert-banner-close\" aria-label=\"Close alert banner\">x</button>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentAlertBanner } from \"@guardian/stand\";\n\nconst sheet = new CSSStyleSheet();\n\nsheet.replaceSync(`\n\t.js-stand-alert-banner {\n\t\tdisplay: ${componentAlertBanner.shared.display};\n\t\talign-items: ${componentAlertBanner.shared['align-items']};\n\t\tjustify-content: ${componentAlertBanner.shared['justify-content']};\n\t\tpadding: ${componentAlertBanner.shared.padding.top}\n\t\t\t${componentAlertBanner.shared.padding.right}\n\t\t\t${componentAlertBanner.shared.padding.bottom}\n\t\t\t${componentAlertBanner.shared.padding.left};\n\t\twidth: ${componentAlertBanner.shared.width};\n\t\theight: ${componentAlertBanner.shared.height};\n\t}\n\n\t.js-stand-alert-banner-content {\n\t\tdisplay: ${componentAlertBanner.shared.content.display};\n\t\tjustify-content: ${componentAlertBanner.shared.content['justify-content']};\n\t\tgap: ${componentAlertBanner.shared.content.gap};\n\t\tflex: ${componentAlertBanner.shared.content.flex};\n\t\theight: ${componentAlertBanner.shared.content.height};\n\t\talign-items: ${componentAlertBanner.shared.content['align-items']};\n\t\tcolor: ${componentAlertBanner.shared.content.color};\n\t\tfont: ${componentAlertBanner.shared.content.typography.font};\n\t\tletter-spacing: ${componentAlertBanner.shared.content.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${componentAlertBanner.shared.content.typography.fontWidth};\n\t}\n\n\t.js-stand-alert-banner-content > .material-symbols {\n\t\tfont-size: 1rem;\n\t\tcolor: ${componentAlertBanner.shared.content.icon.color};\n\t}\n\n\t.js-stand-alert-banner-information {\n\t\tbackground-color: ${componentAlertBanner.information['background-color']};\n\t}\n\n\t.js-stand-alert-banner-success {\n\t\tbackground-color: ${componentAlertBanner.success['background-color']};\n\t}\n\n\t.js-stand-alert-banner-error {\n\t\tbackground-color: ${componentAlertBanner.error['background-color']};\n\t}\n\n\t/* see IconButton for example of styling close button */\n\t.js-stand-alert-banner-close {\n\t\tborder: 0;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tpadding: 0.125rem;\n\t}\n`);\n\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container flow-column\">\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-information\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\tYou are working in the CODE Environment\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-success\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\t<span class=\"material-symbols\">sentiment_satisfied</span>\n\t\t\t\tYour changes have been published.\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-error\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\t<span class=\"material-symbols\">warning</span>\n\t\t\t\tUnable to save changes.\n\t\t\t</div>\n\t\t\t<button class=\"js-stand-alert-banner-close\" aria-label=\"Close alert banner\">x</button>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/alert-banner/styles.d.ts

@@ -0,0 +1,9 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentAlertBanner } from '../../styleD/build/typescript/component/alertBanner';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { AlertBannerProps } from './types';
+export type AlertBannerTheme = Prettify<ComponentAlertBanner>;
+export type PartialAlertBannerTheme = Prettify<DeepPartial<AlertBannerTheme>>;
+export declare const defaultAlertBannerTheme: AlertBannerTheme;
+export declare const alertBannerStyles: (theme: AlertBannerTheme, { level }: Required<Pick<AlertBannerProps, 'level'>>) => SerializedStyles;
+export declare const alertBannerContentStyles: (theme: AlertBannerTheme) => SerializedStyles;

package/dist/types/components/alert-banner/types.d.ts

@@ -0,0 +1,27 @@
+import type { IconProps } from '../../icon';
+import type { IconButtonProps } from '../../icon-button';
+import type { DefaultPropsWithChildren, Prettify } from '../../util/types';
+import type { AlertBannerTheme } from './styles';
+export interface AlertBannerProps extends DefaultPropsWithChildren<AlertBannerTheme> {
+    /**
+     * The severity level of the AlertBanner, which determines its styling.
+     * This is a required prop.
+     * Levels: 'error', 'success', 'information', 'warning
+     */
+    level: keyof Omit<AlertBannerTheme, 'shared'>;
+    /**
+     * Indicates whether the AlertBanner has an icon.
+     * Icon is based on the level of the AlertBanner
+     */
+    showIcon?: boolean;
+    /**
+     * Override the default icon for the message by providing a custom icon, for example when not using material symbols.
+     * This can be either a string (for material symbols) or an SVG element.
+     * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+     */
+    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+    /**
+     * Optional props for the close button. If provided, a close button will be rendered in the AlertBanner, and these props will be passed to the IconButton component.
+     */
+    closeButtonProps?: Prettify<Partial<IconButtonProps>>;
+}

package/dist/types/components/avatar/styles.d.ts

@@ -3,7 +3,7 @@ import type { ComponentAvatar } from '../../styleD/build/typescript/component/av
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { AvatarProps } from './types';
 export type AvatarTheme = Prettify<ComponentAvatar>;
-export type PartialAvatarTheme = DeepPartial<AvatarTheme>;
+export type PartialAvatarTheme = Prettify<DeepPartial<AvatarTheme>>;
 export declare const defaultAvatarTheme: AvatarTheme;
 export declare const avatarImageStyles: SerializedStyles;
 export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

package/dist/types/components/button/styles.d.ts

@@ -3,6 +3,6 @@ import type { ComponentButton } from '../../styleD/build/typescript/component/bu
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { ButtonProps } from './types';
 export type ButtonTheme = Prettify<ComponentButton>;
-export type PartialButtonTheme = DeepPartial<ButtonTheme>;
+export type PartialButtonTheme = Prettify<DeepPartial<ButtonTheme>>;
 export declare const defaultButtonTheme: ButtonTheme;
 export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;

package/dist/types/components/byline/theme.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../../util/types';
-export type PartialBylineTheme = DeepPartial<ComponentByline>;
+import type { DeepPartial, Prettify } from '../../util/types';
+export type PartialBylineTheme = Prettify<DeepPartial<ComponentByline>>;

package/dist/types/components/checkbox/styles.d.ts

@@ -1,9 +1,9 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentCheckbox } from '../../styleD/build/typescript/component/checkbox';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { CheckboxGroupProps, CheckboxProps } from './types';
 export type CheckboxTheme = Prettify<ComponentCheckbox>;
-export type PartialCheckboxTheme = Prettify<Partial<CheckboxTheme>>;
+export type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;
 export declare const defaultCheckboxTheme: CheckboxTheme;
 export declare const checkboxStyles: (theme: CheckboxTheme, { size, isIndeterminate, }: Required<Pick<CheckboxProps, 'size' | 'isIndeterminate'>>) => SerializedStyles;
 export declare const checkboxLabelStyles: (theme: CheckboxTheme) => SerializedStyles;

package/dist/types/components/favicon/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type FaviconTheme = Prettify<ComponentFavicon>;
-export type PartialFaviconTheme = DeepPartial<FaviconTheme>;
+export type PartialFaviconTheme = Prettify<DeepPartial<FaviconTheme>>;
 export declare const defaultFaviconTheme: FaviconTheme;
 export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
 export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;

package/dist/types/components/icon/styles.d.ts

@@ -2,7 +2,7 @@ import type { ComponentIcon } from '../../styleD/build/typescript/component/icon
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { IconProps } from './types';
 export type IconTheme = Prettify<ComponentIcon>;
-export type PartialIconTheme = DeepPartial<IconTheme>;
+export type PartialIconTheme = Prettify<DeepPartial<IconTheme>>;
 export declare const defaultIconTheme: IconTheme;
 export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
     mode: 'text' | 'svg';

package/dist/types/components/menu/styles.d.ts

@@ -3,15 +3,15 @@ import type { ComponentMenu } from '../../styleD/build/typescript/component/menu
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { MenuItemProps, MenuPopoverProps, MenuSectionProps } from './types';
 export type MenuTheme = Prettify<ComponentMenu['menu']>;
-export type PartialMenuTheme = DeepPartial<MenuTheme>;
+export type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
 export declare const defaultMenuTheme: MenuTheme;
 export declare const menuStyles: (theme: MenuTheme) => SerializedStyles;
 export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
-export type PartialMenuSectionTheme = DeepPartial<MenuSectionTheme>;
+export type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
 export declare const defaultMenuSectionTheme: MenuSectionTheme;
 export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }: Required<Pick<MenuSectionProps, 'size'>>) => SerializedStyles;
 export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
-export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
+export type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
 export declare const defaultMenuItemTheme: MenuItemTheme;
 export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>) => SerializedStyles;
 export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
@@ -19,10 +19,10 @@ export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedSt
 export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;
 export declare const menuItemAsideStyles: (theme: MenuItemTheme) => SerializedStyles;
 export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
-export type PartialMenuSeparatorTheme = DeepPartial<MenuSeparatorTheme>;
+export type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
 export declare const defaultMenuSeparatorTheme: MenuSeparatorTheme;
 export declare const menuSeparatorStyles: (theme: MenuSeparatorTheme) => SerializedStyles;
 export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
-export type PartialMenuPopoverTheme = DeepPartial<MenuPopoverTheme>;
+export type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
 export declare const defaultMenuPopoverTheme: MenuPopoverTheme;
 export declare const menuPopoverStyles: (theme: MenuPopoverTheme, { size }: Required<Pick<MenuPopoverProps, 'size'>>) => SerializedStyles;

package/dist/types/components/select/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import type { ComponentSelect } from '../../styleD/build/typescript/component/select';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type SelectTheme = Prettify<ComponentSelect>;
-export type PartialSelectTheme = DeepPartial<SelectTheme>;
+export type PartialSelectTheme = Prettify<DeepPartial<SelectTheme>>;
 export declare const defaultSelectTheme: SelectTheme;
 export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;

package/dist/types/components/topbar/TopBar.d.ts

@@ -1,8 +1,11 @@
+import type { TopBarTheme } from './styles';
 import type { TopBarProps } from './types';
-export declare function TopBarContainerRight({ children, }: {
+export declare function TopBarContainerRight({ children, theme, }: {
     children: TopBarProps['children'];
+    theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TopBarContainerLeft({ children, }: {
+export declare function TopBarContainerLeft({ children, theme, }: {
     children: TopBarProps['children'];
+    theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function TopBar({ children, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/topbar/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import type { ComponentTopBar } from '../../styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type TopBarTheme = Prettify<ComponentTopBar>;
-export type PartialTopBarTheme = DeepPartial<TopBarTheme>;
+export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
 export declare const defaultTopBarTheme: TopBarTheme;
 export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarContainerLeftStyles: (theme: TopBarTheme) => SerializedStyles;

package/dist/types/components/topbar/topBarItem/styles.d.ts

@@ -3,6 +3,6 @@ import type { ComponentTopBar } from '../../../styleD/build/typescript/component
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarItemProps } from './types';
 export type TopBarItemTheme = Prettify<ComponentTopBar['Item']>;
-export type PartialTopBarItemTheme = DeepPartial<TopBarItemTheme>;
+export type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;
 export declare const defaultTopBarItemTheme: TopBarItemTheme;
 export declare const topBarItemStyles: (theme: TopBarItemTheme, alignment: 'left' | 'right', { size }: Required<Pick<TopBarItemProps, 'size'>>) => SerializedStyles;

package/dist/types/components/topbar/topBarNavigation/styles.d.ts

@@ -3,7 +3,7 @@ import type { ComponentTopBar } from '../../../styleD/build/typescript/component
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarNavigationProps } from './types';
 export type TopBarNavigationTheme = Prettify<ComponentTopBar['Navigation']>;
-export type PartialTopBarNavigationTheme = DeepPartial<TopBarNavigationTheme>;
+export type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
 export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
 export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean) => SerializedStyles;
 export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>) => SerializedStyles;

package/dist/types/components/topbar/topBarToolName/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
-export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
+export type PartialTopBarToolNameTheme = Prettify<DeepPartial<TopBarToolNameTheme>>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
 export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;

package/dist/types/components/typography/styles.d.ts

@@ -3,6 +3,6 @@ import { type ComponentTypography } from '../../styleD/build/typescript/componen
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { TypographyProps } from './types';
 export type TypographyTheme = Prettify<ComponentTypography>;
-export type PartialTypographyTheme = DeepPartial<TypographyTheme>;
+export type PartialTypographyTheme = Prettify<DeepPartial<TypographyTheme>>;
 export declare const defaultTypographyTheme: TypographyTheme;
 export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

package/dist/types/components/user-menu/theme.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
-import type { DeepPartial } from '../../util/types';
-export type PartialUserMenuTheme = DeepPartial<ComponentUserMenu>;
+import type { DeepPartial, Prettify } from '../../util/types';
+export type PartialUserMenuTheme = Prettify<DeepPartial<ComponentUserMenu>>;

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
+export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox';

package/dist/types/styleD/build/typescript/component/TopBar.d.ts

@@ -98,6 +98,7 @@ export declare const componentTopBar: {
     };
     ToolName: {
         display: string;
+        color: string;
         'align-items': string;
         gap: string;
         typography: {

package/dist/types/styleD/build/typescript/component/alertBanner.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentAlertBanner: {
+    shared: {
+        display: string;
+        'align-items': string;
+        'justify-content': string;
+        padding: {
+            top: string;
+            right: string;
+            bottom: string;
+            left: string;
+        };
+        width: string;
+        height: string;
+        content: {
+            display: string;
+            'justify-content': string;
+            gap: string;
+            flex: string;
+            height: string;
+            'align-items': string;
+            color: string;
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+            icon: {
+                color: string;
+            };
+        };
+    };
+    information: {
+        'background-color': string;
+    };
+    success: {
+        'background-color': string;
+    };
+    warning: {
+        'background-color': string;
+    };
+    error: {
+        'background-color': string;
+    };
+};
+export type ComponentAlertBanner = typeof componentAlertBanner;

package/dist/types/styleD/build/typescript/component/radioGroup.d.ts

@@ -42,7 +42,7 @@ export declare const componentRadioGroup: {
             selected: {
                 after: {
                     backgroundColor: string;
-                    scale: string;
+                    scale: number;
                 };
                 border: string;
                 invalid: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {
@@ -104,6 +104,11 @@
       "import": "./dist/text-area.js",
       "require": "./dist/text-area.cjs"
     },
+    "./alert-banner": {
+      "types": "./dist/types/alert-banner.d.ts",
+      "import": "./dist/alert-banner.js",
+      "require": "./dist/alert-banner.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -155,7 +160,8 @@
     "./component/textInput.css": "./dist/styleD/build/css/component/textInput.css",
     "./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
     "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
-    "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css"
+    "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
+    "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css"
   },
   "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
   "typesVersions": {
@@ -228,6 +234,9 @@
       ],
       "text-area": [
         "./dist/types/text-area.d.ts"
+      ],
+      "alert-banner": [
+        "./dist/types/alert-banner.d.ts"
       ]
     }
   },
@@ -304,7 +313,7 @@
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.37.2",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "react-aria-components": ">= 1.13.0 <= 1.16.0",
+    "react-aria-components": ">= 1.13.0 <= 1.17.0",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "typescript": ">=5.0.0 <=5.9.3"
   },