@guardian/stand 0.0.25 → 0.0.27

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/select/Select.js

@@ -1,10 +1,10 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import { Select as Select$1, Button, SelectValue, Popover, ListBox as ListBox$1, ListBoxItem } from 'react-aria-components';
+import { ListBoxItem, Select as Select$1, Button, SelectValue, Popover, ListBox as ListBox$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
 import { Icon } from '../icon/Icon.js';
-import { buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles, listBoxItemStyles } from './styles.js';
+import { listBoxItemStyles, buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles } from './styles.js';
 
 function Option({ children, theme = {} }) {
   const mergedTheme = mergeDeep(defaultSelectTheme, 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/select.cjs

@@ -5,5 +5,6 @@ var select = require('./styleD/build/typescript/component/select.cjs');
 
 
 
+exports.Option = Select.Option;
 exports.Select = Select.Select;
 exports.componentSelect = select.componentSelect;

package/dist/select.js

@@ -1,2 +1,2 @@
-export { Select } from './components/select/Select.js';
+export { Option, Select } from './components/select/Select.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';

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/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/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/select/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Select";
-export declare const componentTsx = "import { Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
-export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n\n.stand-select-container {\n\tdisplay: var(--component-select-shared-display);\n\tflex-direction: var(--component-select-shared-flex-direction);\n\tgap: var(--component-select-shared-gap);\n\n\tmax-width: var(--component-select-shared-maxWidth);\n\twidth: var(--component-select-shared-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-button-display);\n\t\tjustify-content: var(--component-select-button-justify-content);\n\t\talign-items: var(--component-select-button-align-items);\n\t\tbackground-color: var(--component-select-button-background-color);\n\t\tborder: var(--component-select-button-border);\n\t\tborder-radius: var(--component-select-button-border-radius);\n\t\theight: var(--component-select-button-height);\n\t\tpadding-left: var(--component-select-button-padding-left);\n\t\tpadding-right: var(--component-select-button-padding-right);\n\t\tmargin-top: var(--component-select-button-margin-top);\n\t\tcolor: var(--component-select-button-color);\n\n\t\tfont: var(--component-select-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
+export declare const componentTsx = "import { Option, Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
+export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n@import '@guardian/stand/component/form.css';\n\n.stand-select-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-select-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-select-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-shared-button-display);\n\t\tjustify-content: var(--component-select-shared-button-justify-content);\n\t\talign-items: var(--component-select-shared-button-align-items);\n\t\tbackground-color: var(--component-select-shared-button-background-color);\n\t\tborder: var(--component-select-shared-button-border);\n\t\tborder-radius: var(--component-select-shared-button-border-radius);\n\t\theight: var(--component-select-shared-button-height);\n\t\tpadding-left: var(--component-select-shared-button-padding-left);\n\t\tpadding-right: var(--component-select-shared-button-padding-right);\n\t\tmargin-top: var(--component-select-shared-button-margin-top);\n\t\tcolor: var(--component-select-shared-button-color);\n\n\t\tfont: var(--component-select-shared-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-shared-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-shared-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentSelect } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\n.js-stand-select-container {\n\tdisplay: ${componentSelect.shared.display};\n\tflex-direction: ${componentSelect.shared.flexDirection};\n\tgap: ${componentSelect.shared.gap};\n\n\tmax-width: ${componentSelect.shared.maxWidth};\n\twidth: ${componentSelect.shared.width};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.button.display};\n\tjustify-content: ${componentSelect.button.justifyContent};\n\talign-items: ${componentSelect.button.alignItems};\n\tbackground-color: ${componentSelect.button.backgroundColor};\n\tborder: ${componentSelect.button.border};\n\tborder-radius: ${componentSelect.button.borderRadius};\n\theight: ${componentSelect.button.height};\n\tpadding-left: ${componentSelect.button.paddingLeft};\n\tpadding-right: ${componentSelect.button.paddingRight};\n\tmargin-top: ${componentSelect.button.marginTop};\n\tcolor: ${componentSelect.button.color};\n\n\tfont: ${componentSelect.button.typography.font};\n\tletter-spacing: ${componentSelect.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.button.focused.outline};\n\t\toutline-offset: ${componentSelect.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.button.disabled.color};\n\t\tborder: ${componentSelect.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentForm, componentSelect } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\n.js-stand-select-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-select-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-select-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.shared.button.display};\n\tjustify-content: ${componentSelect.shared.button.justifyContent};\n\talign-items: ${componentSelect.shared.button.alignItems};\n\tbackground-color: ${componentSelect.shared.button.backgroundColor};\n\tborder: ${componentSelect.shared.button.border};\n\tborder-radius: ${componentSelect.shared.button.borderRadius};\n\theight: ${componentSelect.shared.button.height};\n\tpadding-left: ${componentSelect.shared.button.paddingLeft};\n\tpadding-right: ${componentSelect.shared.button.paddingRight};\n\tmargin-top: ${componentSelect.shared.button.marginTop};\n\tcolor: ${componentSelect.shared.button.color};\n\n\tfont: ${componentSelect.shared.button.typography.font};\n\tletter-spacing: ${componentSelect.shared.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.shared.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.shared.button.focused.outline};\n\t\toutline-offset: ${componentSelect.shared.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.shared.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.shared.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.shared.button.disabled.color};\n\t\tborder: ${componentSelect.shared.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";

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/select.d.ts

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/select.css),
  * you don't need to install these.
  */
-export { Select } from './components/select/Select';
-export type { SelectProps } from './components/select/types';
+export { Option, Select } from './components/select/Select';
+export type { OptionProps, SelectProps } from './components/select/types';
 export type { PartialSelectTheme as SelectTheme } from './components/select/styles';
 export { componentSelect } from './styleD/build/typescript/component/select';
 export type { ComponentSelect } from './styleD/build/typescript/component/select';

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "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"
   },