@guardian/stand 0.0.63 → 0.0.64

package/dist/UserFeedbackSummary.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_userFeedbackSummary = require("./styleD/build/typescript/component/userFeedbackSummary.cjs");
+const require_UserFeedbackSummary = require("./components/UserFeedbackSummary/UserFeedbackSummary.cjs");
+exports.UserFeedbackSummary = require_UserFeedbackSummary.UserFeedbackSummary;
+exports.componentUserFeedbackSummary = require_userFeedbackSummary.componentUserFeedbackSummary;

package/dist/UserFeedbackSummary.d.cts

@@ -0,0 +1,5 @@
+import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.cjs";
+import { PartialUserFeedbackSummaryTheme } from "./components/UserFeedbackSummary/styles.cjs";
+import { UserFeedbackSummaryProps } from "./components/UserFeedbackSummary/types.cjs";
+import { UserFeedbackSummary } from "./components/UserFeedbackSummary/UserFeedbackSummary.cjs";
+export { type ComponentUserFeedbackSummary, UserFeedbackSummary, type UserFeedbackSummaryProps, type PartialUserFeedbackSummaryTheme as UserFeedbackSummaryTheme, componentUserFeedbackSummary };

package/dist/UserFeedbackSummary.d.ts

@@ -0,0 +1,5 @@
+import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
+import { PartialUserFeedbackSummaryTheme } from "./components/UserFeedbackSummary/styles.js";
+import { UserFeedbackSummaryProps } from "./components/UserFeedbackSummary/types.js";
+import { UserFeedbackSummary } from "./components/UserFeedbackSummary/UserFeedbackSummary.js";
+export { type ComponentUserFeedbackSummary, UserFeedbackSummary, type UserFeedbackSummaryProps, type PartialUserFeedbackSummaryTheme as UserFeedbackSummaryTheme, componentUserFeedbackSummary };

package/dist/UserFeedbackSummary.js

@@ -0,0 +1,3 @@
+import { componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
+import { UserFeedbackSummary } from "./components/UserFeedbackSummary/UserFeedbackSummary.js";
+export { UserFeedbackSummary, componentUserFeedbackSummary };

package/dist/components/UserFeedbackSummary/UserFeedbackSummary.cjs

@@ -0,0 +1,42 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Typography = require("../Typography/Typography.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/UserFeedbackSummary/UserFeedbackSummary.tsx
+const UserFeedbackSummary = ({ children, level, title, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultUserFeedbackSummaryTheme, theme);
+	const determinedIcon = (0, react.useMemo)(() => {
+		if (icon) return icon;
+		switch (level) {
+			case "error": return "warning";
+			case "warning": return "flag";
+			case "success": return "sentiment_satisfied_alt";
+			case "information": return "info";
+		}
+	}, [icon, level]);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: [require_styles.userFeedbackSummaryStyles(mergedTheme, { level }), cssOverrides],
+		className,
+		...props,
+		children: [!hideIcon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+			size: "md",
+			fill: mergedTheme[level].color,
+			children: determinedIcon
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.textLayoutStyles,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "bodyBoldSm",
+				theme: { color: mergedTheme[level].color },
+				children: title
+			}), children && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "bodySm",
+				theme: { color: mergedTheme.shared.color },
+				children
+			})]
+		})]
+	});
+};
+//#endregion
+exports.UserFeedbackSummary = UserFeedbackSummary;

package/dist/components/UserFeedbackSummary/UserFeedbackSummary.d.cts

@@ -0,0 +1,5 @@
+import { UserFeedbackSummaryProps } from "./types.cjs";
+//#region src/components/UserFeedbackSummary/UserFeedbackSummary.d.ts
+declare const UserFeedbackSummary: ({ children, level, title, hideIcon, icon, theme, cssOverrides, className, ...props }: UserFeedbackSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { UserFeedbackSummary };

package/dist/components/UserFeedbackSummary/UserFeedbackSummary.d.ts

@@ -0,0 +1,5 @@
+import { UserFeedbackSummaryProps } from "./types.js";
+//#region src/components/UserFeedbackSummary/UserFeedbackSummary.d.ts
+declare const UserFeedbackSummary: ({ children, level, title, hideIcon, icon, theme, cssOverrides, className, ...props }: UserFeedbackSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { UserFeedbackSummary };

package/dist/components/UserFeedbackSummary/UserFeedbackSummary.js

@@ -0,0 +1,42 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { Typography } from "../Typography/Typography.js";
+import { defaultUserFeedbackSummaryTheme, textLayoutStyles, userFeedbackSummaryStyles } from "./styles.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/UserFeedbackSummary/UserFeedbackSummary.tsx
+const UserFeedbackSummary = ({ children, level, title, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) => {
+	const mergedTheme = mergeDeep(defaultUserFeedbackSummaryTheme, theme);
+	const determinedIcon = useMemo(() => {
+		if (icon) return icon;
+		switch (level) {
+			case "error": return "warning";
+			case "warning": return "flag";
+			case "success": return "sentiment_satisfied_alt";
+			case "information": return "info";
+		}
+	}, [icon, level]);
+	return /* @__PURE__ */ jsxs("div", {
+		css: [userFeedbackSummaryStyles(mergedTheme, { level }), cssOverrides],
+		className,
+		...props,
+		children: [!hideIcon && /* @__PURE__ */ jsx(Icon, {
+			size: "md",
+			fill: mergedTheme[level].color,
+			children: determinedIcon
+		}), /* @__PURE__ */ jsxs("div", {
+			css: textLayoutStyles,
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "bodyBoldSm",
+				theme: { color: mergedTheme[level].color },
+				children: title
+			}), children && /* @__PURE__ */ jsx(Typography, {
+				variant: "bodySm",
+				theme: { color: mergedTheme.shared.color },
+				children
+			})]
+		})]
+	});
+};
+//#endregion
+export { UserFeedbackSummary };

package/dist/components/UserFeedbackSummary/styles.cjs

@@ -0,0 +1,30 @@
+const require_userFeedbackSummary = require("../../styleD/build/typescript/component/userFeedbackSummary.cjs");
+const require_sizing = require("../../styleD/build/typescript/base/sizing.cjs");
+const require_spacing = require("../../styleD/build/typescript/base/spacing.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/UserFeedbackSummary/styles.ts
+const defaultUserFeedbackSummaryTheme = require_userFeedbackSummary.componentUserFeedbackSummary;
+const userFeedbackSummaryStyles = (theme, { level }) => {
+	return _emotion_react.css`
+		display: flex;
+		gap: ${theme.shared.gap};
+		border-width: ${theme.shared.borderWidth};
+		border-style: ${theme.shared.borderStyle};
+		border-color: ${theme[level].borderColor};
+		padding-top: ${theme.shared.paddingTop};
+		padding-right: ${theme.shared.paddingRight};
+		padding-bottom: ${theme.shared.paddingBottom};
+		padding-left: ${theme.shared.paddingLeft};
+		max-width: ${theme.shared.maxWidth};
+	`;
+};
+const textLayoutStyles = _emotion_react.css`
+	display: flex;
+	flex-direction: column;
+	gap: ${require_spacing.baseSpacing["4Rem"]};
+	margin-top: ${require_sizing.baseSizing["size1Rem"]};
+`;
+//#endregion
+exports.defaultUserFeedbackSummaryTheme = defaultUserFeedbackSummaryTheme;
+exports.textLayoutStyles = textLayoutStyles;
+exports.userFeedbackSummaryStyles = userFeedbackSummaryStyles;

package/dist/components/UserFeedbackSummary/styles.d.cts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentUserFeedbackSummary } from "../../styleD/build/typescript/component/userFeedbackSummary.cjs";
+import "./types.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/UserFeedbackSummary/styles.d.ts
+type UserFeedbackSummaryTheme = Prettify<ComponentUserFeedbackSummary>;
+type PartialUserFeedbackSummaryTheme = Prettify<DeepPartial<UserFeedbackSummaryTheme>>;
+//#endregion
+export { PartialUserFeedbackSummaryTheme, UserFeedbackSummaryTheme };

package/dist/components/UserFeedbackSummary/styles.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentUserFeedbackSummary } from "../../styleD/build/typescript/component/userFeedbackSummary.js";
+import "./types.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/UserFeedbackSummary/styles.d.ts
+type UserFeedbackSummaryTheme = Prettify<ComponentUserFeedbackSummary>;
+type PartialUserFeedbackSummaryTheme = Prettify<DeepPartial<UserFeedbackSummaryTheme>>;
+//#endregion
+export { PartialUserFeedbackSummaryTheme, UserFeedbackSummaryTheme };

package/dist/components/UserFeedbackSummary/styles.js

@@ -0,0 +1,28 @@
+import { componentUserFeedbackSummary } from "../../styleD/build/typescript/component/userFeedbackSummary.js";
+import { baseSizing } from "../../styleD/build/typescript/base/sizing.js";
+import { baseSpacing } from "../../styleD/build/typescript/base/spacing.js";
+import { css } from "@emotion/react";
+//#region src/components/UserFeedbackSummary/styles.ts
+const defaultUserFeedbackSummaryTheme = componentUserFeedbackSummary;
+const userFeedbackSummaryStyles = (theme, { level }) => {
+	return css`
+		display: flex;
+		gap: ${theme.shared.gap};
+		border-width: ${theme.shared.borderWidth};
+		border-style: ${theme.shared.borderStyle};
+		border-color: ${theme[level].borderColor};
+		padding-top: ${theme.shared.paddingTop};
+		padding-right: ${theme.shared.paddingRight};
+		padding-bottom: ${theme.shared.paddingBottom};
+		padding-left: ${theme.shared.paddingLeft};
+		max-width: ${theme.shared.maxWidth};
+	`;
+};
+const textLayoutStyles = css`
+	display: flex;
+	flex-direction: column;
+	gap: ${baseSpacing["4Rem"]};
+	margin-top: ${baseSizing["size1Rem"]};
+`;
+//#endregion
+export { defaultUserFeedbackSummaryTheme, textLayoutStyles, userFeedbackSummaryStyles };

package/dist/components/UserFeedbackSummary/types.d.cts

@@ -0,0 +1,27 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { IconProps } from "../Icon/types.cjs";
+import { UserFeedbackSummaryTheme } from "./styles.cjs";
+//#region src/components/UserFeedbackSummary/types.d.ts
+type UserFeedbackSummaryProps = DefaultPropsWithChildren<UserFeedbackSummaryTheme> & {
+  /**
+   * The severity level of the message which determines its styling.
+   * This is a required prop.
+   * Levels: 'error', 'warning', 'success', 'information'
+   */
+  level: keyof Omit<UserFeedbackSummaryTheme, 'shared'>;
+  /**
+   * Title of feedback summary message. This is a required prop.
+   */
+  title: string;
+  /**
+   * Optional prop to hide the default icon associated with the message level.
+   */
+  hideIcon?: boolean;
+  /**
+   * Override the default icon for the message by providing a custom icon.
+   * This can be either a string (for Material Symbols) or an SVG element.
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+};
+//#endregion
+export { UserFeedbackSummaryProps };

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

@@ -0,0 +1,27 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { IconProps } from "../Icon/types.js";
+import { UserFeedbackSummaryTheme } from "./styles.js";
+//#region src/components/UserFeedbackSummary/types.d.ts
+type UserFeedbackSummaryProps = DefaultPropsWithChildren<UserFeedbackSummaryTheme> & {
+  /**
+   * The severity level of the message which determines its styling.
+   * This is a required prop.
+   * Levels: 'error', 'warning', 'success', 'information'
+   */
+  level: keyof Omit<UserFeedbackSummaryTheme, 'shared'>;
+  /**
+   * Title of feedback summary message. This is a required prop.
+   */
+  title: string;
+  /**
+   * Optional prop to hide the default icon associated with the message level.
+   */
+  hideIcon?: boolean;
+  /**
+   * Override the default icon for the message by providing a custom icon.
+   * This can be either a string (for Material Symbols) or an SVG element.
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+};
+//#endregion
+export { UserFeedbackSummaryProps };

package/dist/index.cjs

@@ -28,6 +28,7 @@ const require_tooltip = require("./styleD/build/typescript/component/tooltip.cjs
 const require_topBar = require("./styleD/build/typescript/component/topBar.cjs");
 const require_typography = require("./styleD/build/typescript/component/typography.cjs");
 const require_tabs = require("./styleD/build/typescript/component/tabs.cjs");
+const require_userFeedbackSummary = require("./styleD/build/typescript/component/userFeedbackSummary.cjs");
 const require_colors = require("./styleD/build/typescript/base/colors.cjs");
 const require_radius = require("./styleD/build/typescript/base/radius.cjs");
 const require_sizing = require("./styleD/build/typescript/base/sizing.cjs");
@@ -72,6 +73,7 @@ exports.componentTextInput = require_textInput.componentTextInput;
 exports.componentTooltip = require_tooltip.componentTooltip;
 exports.componentTopBar = require_topBar.componentTopBar;
 exports.componentTypography = require_typography.componentTypography;
+exports.componentUserFeedbackSummary = require_userFeedbackSummary.componentUserFeedbackSummary;
 exports.componentUserMenu = require_userMenu.componentUserMenu;
 exports.semanticBreakpoints = require_breakpoints.semanticBreakpoints;
 exports.semanticColors = require_colors$1.semanticColors;

package/dist/index.d.cts

@@ -27,6 +27,7 @@ import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.cjs";
 import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.cjs";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.cjs";
+import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.cjs";
 import { ComponentUserMenu, componentUserMenu } from "./styleD/build/typescript/component/userMenu.cjs";
 import { BaseColors, baseColors } from "./styleD/build/typescript/base/colors.cjs";
 import { BaseRadius, baseRadius } from "./styleD/build/typescript/base/radius.cjs";
@@ -39,4 +40,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -27,6 +27,7 @@ import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.js";
 import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.js";
+import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
 import { ComponentUserMenu, componentUserMenu } from "./styleD/build/typescript/component/userMenu.js";
 import { BaseColors, baseColors } from "./styleD/build/typescript/base/colors.js";
 import { BaseRadius, baseRadius } from "./styleD/build/typescript/base/radius.js";
@@ -39,4 +40,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -27,6 +27,7 @@ import { componentTooltip } from "./styleD/build/typescript/component/tooltip.js
 import { componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { componentTabs } from "./styleD/build/typescript/component/tabs.js";
+import { componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
 import { baseColors } from "./styleD/build/typescript/base/colors.js";
 import { baseRadius } from "./styleD/build/typescript/base/radius.js";
 import { baseSizing } from "./styleD/build/typescript/base/sizing.js";
@@ -39,4 +40,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/styleD/build/css/base/colors.css

@@ -77,7 +77,7 @@
 	--base-colors-yellow-500: #f4cd44;
 	--base-colors-yellow-600: #f6d86d;
 	--base-colors-yellow-700: #f9e396;
-	--base-colors-yellow-800: #fbeebf;
+	--base-colors-yellow-800: #ffedac;
 	--base-colors-yellow-900: #fef9e8;
 	--base-colors-orange-50: #45260e;
 	--base-colors-orange-100: #693c16;

package/dist/styleD/build/css/base/typography.css

@@ -29,9 +29,9 @@
 	--base-typography-size-36-rem: 2.25rem;
 	--base-typography-size-42-rem: 2.625rem;
 	--base-typography-size-48-rem: 3rem;
-	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-guardian-text-egyptian-normal: 400;
 	--base-typography-weight-guardian-text-egyptian-bold: 700;
+	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-open-sans-light: 340;
 	--base-typography-weight-open-sans-normal: 460;
 	--base-typography-weight-open-sans-semi-bold: 600;

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

@@ -26,6 +26,6 @@
 	--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-warning-background-color: #ffedac;
 	--component-alert-banner-error-background-color: #f5c6c0;
 }

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

@@ -49,7 +49,7 @@
 	--component-avatar-shared-color-orange-hover-background: #fac7a1;
 	--component-avatar-shared-color-orange-active-background: #f9b27c;
 	--component-avatar-shared-color-yellow-text: #5b4a0b;
-	--component-avatar-shared-color-yellow-background: #fbeebf;
+	--component-avatar-shared-color-yellow-background: #ffedac;
 	--component-avatar-shared-color-yellow-border: unset;
 	--component-avatar-shared-color-yellow-hover-background: #f9e396;
 	--component-avatar-shared-color-yellow-active-background: #f6d86d;

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

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-user-feedback-summary-shared-color: #000000;
+	--component-user-feedback-summary-shared-gap: 0.25rem;
+	--component-user-feedback-summary-shared-padding-top: 0.75rem;
+	--component-user-feedback-summary-shared-padding-right: 1rem;
+	--component-user-feedback-summary-shared-padding-bottom: 0.75rem;
+	--component-user-feedback-summary-shared-padding-left: 0.5rem;
+	--component-user-feedback-summary-shared-max-width: 46ch;
+	--component-user-feedback-summary-shared-border-width: 0.0625rem;
+	--component-user-feedback-summary-shared-border-style: solid;
+	--component-user-feedback-summary-error-color: #8c2113;
+	--component-user-feedback-summary-error-border-color: #b42a19;
+	--component-user-feedback-summary-warning-color: #693c16;
+	--component-user-feedback-summary-warning-border-color: #9a7c11;
+	--component-user-feedback-summary-success-color: #326528;
+	--component-user-feedback-summary-success-border-color: #408233;
+	--component-user-feedback-summary-information-color: #092f62;
+	--component-user-feedback-summary-information-border-color: #1054af;
+}

package/dist/styleD/build/css/semantic/colors.css

@@ -41,6 +41,9 @@
 	--semantic-colors-border-disabled: #dcdcdc;
 	--semantic-colors-border-accent: #0d4289;
 	--semantic-colors-border-error: #b42a19;
+	--semantic-colors-border-success: #408233;
+	--semantic-colors-border-warning: #9a7c11;
+	--semantic-colors-border-information: #1054af;
 	--semantic-colors-border-focused: #0072a9;
 	--semantic-colors-border-selected: #0072a9;
 	--semantic-colors-border-selected-inverse: #8abed7;
@@ -67,7 +70,8 @@
 	--semantic-colors-fill-warm-purple-weak: #dac3e8;
 	--semantic-colors-fill-magenta-weak: #edc6d7;
 	--semantic-colors-fill-orange-weak: #fcddc6;
-	--semantic-colors-fill-yellow-weak: #fbeebf;
+	--semantic-colors-fill-orange-medium: #fac7a1;
+	--semantic-colors-fill-yellow-weak: #ffedac;
 	--semantic-colors-fill-selected: #005d8b;
 	--semantic-colors-fill-selected-weaker: #e6f1f6;
 	--semantic-colors-fill-selected-weak: #c5dfec;
@@ -77,10 +81,11 @@
 	--semantic-colors-fill-selected-pressed-weak: #5ca5c8;
 	--semantic-colors-fill-draft-strong: #f1c21b;
 	--semantic-colors-fill-live-weak: #aed2a6;
-	--semantic-colors-fill-warning-weak: #fbeebf;
+	--semantic-colors-fill-warning-weak: #ffedac;
 	--semantic-colors-fill-information-weak: #e8f0fb;
-	--semantic-colors-fill-error-weak: #f5c6c0;
 	--semantic-colors-fill-error-weaker: #fbebe9;
+	--semantic-colors-fill-error-weak: #f5c6c0;
+	--semantic-colors-fill-error-medium: #eea198;
 	--semantic-colors-fill-error-strong: #b42a19;
 	--semantic-colors-fill-success-weak: #cde4c9;
 	--semantic-colors-fill-success-strong: #326528;

package/dist/styleD/build/typescript/base/colors.cjs

@@ -90,7 +90,7 @@ const baseColors = {
 		"500": "#f4cd44",
 		"600": "#f6d86d",
 		"700": "#f9e396",
-		"800": "#fbeebf",
+		"800": "#ffedac",
 		"900": "#fef9e8"
 	},
 	orange: {

package/dist/styleD/build/typescript/base/colors.d.cts

@@ -90,7 +90,7 @@ declare const baseColors: {
     readonly '500': "#f4cd44";
     readonly '600': "#f6d86d";
     readonly '700': "#f9e396";
-    readonly '800': "#fbeebf";
+    readonly '800': "#ffedac";
     readonly '900': "#fef9e8";
   };
   readonly orange: {

package/dist/styleD/build/typescript/base/colors.d.ts

@@ -90,7 +90,7 @@ declare const baseColors: {
     readonly '500': "#f4cd44";
     readonly '600': "#f6d86d";
     readonly '700': "#f9e396";
-    readonly '800': "#fbeebf";
+    readonly '800': "#ffedac";
     readonly '900': "#fef9e8";
   };
   readonly orange: {

package/dist/styleD/build/typescript/base/colors.js

@@ -90,7 +90,7 @@ const baseColors = {
 		"500": "#f4cd44",
 		"600": "#f6d86d",
 		"700": "#f9e396",
-		"800": "#fbeebf",
+		"800": "#ffedac",
 		"900": "#fef9e8"
 	},
 	orange: {

package/dist/styleD/build/typescript/base/typography.cjs

@@ -34,11 +34,11 @@ const baseTypography = {
 		"48Rem": "3rem"
 	},
 	weight: {
-		guardianHeadline: { bold: 700 },
 		guardianTextEgyptian: {
 			normal: 400,
 			bold: 700
 		},
+		guardianHeadline: { bold: 700 },
 		openSans: {
 			light: 340,
 			normal: 460,

package/dist/styleD/build/typescript/base/typography.d.cts

@@ -34,13 +34,13 @@ declare const baseTypography: {
     readonly '48Rem': "3rem";
   };
   readonly weight: {
-    readonly guardianHeadline: {
-      readonly bold: 700;
-    };
     readonly guardianTextEgyptian: {
       readonly normal: 400;
       readonly bold: 700;
     };
+    readonly guardianHeadline: {
+      readonly bold: 700;
+    };
     readonly openSans: {
       readonly light: 340;
       readonly normal: 460;

package/dist/styleD/build/typescript/base/typography.d.ts

@@ -34,13 +34,13 @@ declare const baseTypography: {
     readonly '48Rem': "3rem";
   };
   readonly weight: {
-    readonly guardianHeadline: {
-      readonly bold: 700;
-    };
     readonly guardianTextEgyptian: {
       readonly normal: 400;
       readonly bold: 700;
     };
+    readonly guardianHeadline: {
+      readonly bold: 700;
+    };
     readonly openSans: {
       readonly light: 340;
       readonly normal: 460;

package/dist/styleD/build/typescript/base/typography.js

@@ -34,11 +34,11 @@ const baseTypography = {
 		"48Rem": "3rem"
 	},
 	weight: {
-		guardianHeadline: { bold: 700 },
 		guardianTextEgyptian: {
 			normal: 400,
 			bold: 700
 		},
+		guardianHeadline: { bold: 700 },
 		openSans: {
 			light: 340,
 			normal: 460,

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

@@ -33,7 +33,7 @@ const componentAlertBanner = {
 	},
 	information: { backgroundColor: "#e8f0fb" },
 	success: { backgroundColor: "#cde4c9" },
-	warning: { backgroundColor: "#fbeebf" },
+	warning: { backgroundColor: "#ffedac" },
 	error: { backgroundColor: "#f5c6c0" }
 };
 //#endregion

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

@@ -33,7 +33,7 @@ const componentAlertBanner = {
 	},
 	information: { backgroundColor: "#e8f0fb" },
 	success: { backgroundColor: "#cde4c9" },
-	warning: { backgroundColor: "#fbeebf" },
+	warning: { backgroundColor: "#ffedac" },
 	error: { backgroundColor: "#f5c6c0" }
 };
 //#endregion

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

@@ -70,7 +70,7 @@ const componentAvatar = {
 			},
 			yellow: {
 				text: "#5b4a0b",
-				background: "#fbeebf",
+				background: "#ffedac",
 				border: "unset",
 				hover: { background: "#f9e396" },
 				active: { background: "#f6d86d" }

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

@@ -70,7 +70,7 @@ const componentAvatar = {
 			},
 			yellow: {
 				text: "#5b4a0b",
-				background: "#fbeebf",
+				background: "#ffedac",
 				border: "unset",
 				hover: { background: "#f9e396" },
 				active: { background: "#f6d86d" }

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

@@ -0,0 +1,35 @@
+//#region src/styleD/build/typescript/component/userFeedbackSummary.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentUserFeedbackSummary = {
+	shared: {
+		color: "#000000",
+		gap: "0.25rem",
+		paddingTop: "0.75rem",
+		paddingRight: "1rem",
+		paddingBottom: "0.75rem",
+		paddingLeft: "0.5rem",
+		maxWidth: "46ch",
+		borderWidth: "0.0625rem",
+		borderStyle: "solid"
+	},
+	error: {
+		color: "#8c2113",
+		borderColor: "#b42a19"
+	},
+	warning: {
+		color: "#693c16",
+		borderColor: "#9a7c11"
+	},
+	success: {
+		color: "#326528",
+		borderColor: "#408233"
+	},
+	information: {
+		color: "#092f62",
+		borderColor: "#1054af"
+	}
+};
+//#endregion
+exports.componentUserFeedbackSummary = componentUserFeedbackSummary;

package/dist/styleD/build/typescript/component/userFeedbackSummary.d.cts

@@ -0,0 +1,36 @@
+//#region src/styleD/build/typescript/component/userFeedbackSummary.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentUserFeedbackSummary: {
+  shared: {
+    color: string;
+    gap: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    maxWidth: string;
+    borderWidth: string;
+    borderStyle: string;
+  };
+  error: {
+    color: string;
+    borderColor: string;
+  };
+  warning: {
+    color: string;
+    borderColor: string;
+  };
+  success: {
+    color: string;
+    borderColor: string;
+  };
+  information: {
+    color: string;
+    borderColor: string;
+  };
+};
+type ComponentUserFeedbackSummary = typeof componentUserFeedbackSummary;
+//#endregion
+export { ComponentUserFeedbackSummary, componentUserFeedbackSummary };

package/dist/styleD/build/typescript/component/userFeedbackSummary.d.ts

@@ -0,0 +1,36 @@
+//#region src/styleD/build/typescript/component/userFeedbackSummary.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentUserFeedbackSummary: {
+  shared: {
+    color: string;
+    gap: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    maxWidth: string;
+    borderWidth: string;
+    borderStyle: string;
+  };
+  error: {
+    color: string;
+    borderColor: string;
+  };
+  warning: {
+    color: string;
+    borderColor: string;
+  };
+  success: {
+    color: string;
+    borderColor: string;
+  };
+  information: {
+    color: string;
+    borderColor: string;
+  };
+};
+type ComponentUserFeedbackSummary = typeof componentUserFeedbackSummary;
+//#endregion
+export { ComponentUserFeedbackSummary, componentUserFeedbackSummary };

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

@@ -0,0 +1,35 @@
+//#region src/styleD/build/typescript/component/userFeedbackSummary.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentUserFeedbackSummary = {
+	shared: {
+		color: "#000000",
+		gap: "0.25rem",
+		paddingTop: "0.75rem",
+		paddingRight: "1rem",
+		paddingBottom: "0.75rem",
+		paddingLeft: "0.5rem",
+		maxWidth: "46ch",
+		borderWidth: "0.0625rem",
+		borderStyle: "solid"
+	},
+	error: {
+		color: "#8c2113",
+		borderColor: "#b42a19"
+	},
+	warning: {
+		color: "#693c16",
+		borderColor: "#9a7c11"
+	},
+	success: {
+		color: "#326528",
+		borderColor: "#408233"
+	},
+	information: {
+		color: "#092f62",
+		borderColor: "#1054af"
+	}
+};
+//#endregion
+export { componentUserFeedbackSummary };

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -46,6 +46,9 @@ const semanticColors = {
 		disabled: "#dcdcdc",
 		accent: "#0d4289",
 		error: "#b42a19",
+		success: "#408233",
+		warning: "#9a7c11",
+		information: "#1054af",
 		focused: "#0072a9",
 		selected: "#0072a9",
 		selectedInverse: "#8abed7"
@@ -74,7 +77,8 @@ const semanticColors = {
 		warmPurpleWeak: "#dac3e8",
 		magentaWeak: "#edc6d7",
 		orangeWeak: "#fcddc6",
-		yellowWeak: "#fbeebf",
+		orangeMedium: "#fac7a1",
+		yellowWeak: "#ffedac",
 		selected: "#005d8b",
 		selectedWeaker: "#e6f1f6",
 		selectedWeak: "#c5dfec",
@@ -84,10 +88,11 @@ const semanticColors = {
 		selectedPressedWeak: "#5ca5c8",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
-		warningWeak: "#fbeebf",
+		warningWeak: "#ffedac",
 		informationWeak: "#e8f0fb",
-		errorWeak: "#f5c6c0",
 		errorWeaker: "#fbebe9",
+		errorWeak: "#f5c6c0",
+		errorMedium: "#eea198",
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",

package/dist/styleD/build/typescript/semantic/colors.d.cts

@@ -46,6 +46,9 @@ declare const semanticColors: {
     disabled: string;
     accent: string;
     error: string;
+    success: string;
+    warning: string;
+    information: string;
     focused: string;
     selected: string;
     selectedInverse: string;
@@ -74,6 +77,7 @@ declare const semanticColors: {
     warmPurpleWeak: string;
     magentaWeak: string;
     orangeWeak: string;
+    orangeMedium: string;
     yellowWeak: string;
     selected: string;
     selectedWeaker: string;
@@ -86,8 +90,9 @@ declare const semanticColors: {
     liveWeak: string;
     warningWeak: string;
     informationWeak: string;
-    errorWeak: string;
     errorWeaker: string;
+    errorWeak: string;
+    errorMedium: string;
     errorStrong: string;
     successWeak: string;
     successStrong: string;

package/dist/styleD/build/typescript/semantic/colors.d.ts

@@ -46,6 +46,9 @@ declare const semanticColors: {
     disabled: string;
     accent: string;
     error: string;
+    success: string;
+    warning: string;
+    information: string;
     focused: string;
     selected: string;
     selectedInverse: string;
@@ -74,6 +77,7 @@ declare const semanticColors: {
     warmPurpleWeak: string;
     magentaWeak: string;
     orangeWeak: string;
+    orangeMedium: string;
     yellowWeak: string;
     selected: string;
     selectedWeaker: string;
@@ -86,8 +90,9 @@ declare const semanticColors: {
     liveWeak: string;
     warningWeak: string;
     informationWeak: string;
-    errorWeak: string;
     errorWeaker: string;
+    errorWeak: string;
+    errorMedium: string;
     errorStrong: string;
     successWeak: string;
     successStrong: string;

package/dist/styleD/build/typescript/semantic/colors.js

@@ -46,6 +46,9 @@ const semanticColors = {
 		disabled: "#dcdcdc",
 		accent: "#0d4289",
 		error: "#b42a19",
+		success: "#408233",
+		warning: "#9a7c11",
+		information: "#1054af",
 		focused: "#0072a9",
 		selected: "#0072a9",
 		selectedInverse: "#8abed7"
@@ -74,7 +77,8 @@ const semanticColors = {
 		warmPurpleWeak: "#dac3e8",
 		magentaWeak: "#edc6d7",
 		orangeWeak: "#fcddc6",
-		yellowWeak: "#fbeebf",
+		orangeMedium: "#fac7a1",
+		yellowWeak: "#ffedac",
 		selected: "#005d8b",
 		selectedWeaker: "#e6f1f6",
 		selectedWeak: "#c5dfec",
@@ -84,10 +88,11 @@ const semanticColors = {
 		selectedPressedWeak: "#5ca5c8",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
-		warningWeak: "#fbeebf",
+		warningWeak: "#ffedac",
 		informationWeak: "#e8f0fb",
-		errorWeak: "#f5c6c0",
 		errorWeaker: "#fbebe9",
+		errorWeak: "#f5c6c0",
+		errorMedium: "#eea198",
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -347,6 +347,16 @@
         "default": "./dist/Tooltip.cjs"
       }
     },
+    "./UserFeedbackSummary": {
+      "import": {
+        "types": "./dist/UserFeedbackSummary.d.ts",
+        "default": "./dist/UserFeedbackSummary.js"
+      },
+      "require": {
+        "types": "./dist/UserFeedbackSummary.d.cts",
+        "default": "./dist/UserFeedbackSummary.cjs"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",
@@ -402,7 +412,8 @@
     "./component/layout.css": "./dist/styleD/build/css/component/layout.css",
     "./component/modal.css": "./dist/styleD/build/css/component/modal.css",
     "./component/tabs.css": "./dist/styleD/build/css/component/tabs.css",
-    "./component/tooltip.css": "./dist/styleD/build/css/component/tooltip.css"
+    "./component/tooltip.css": "./dist/styleD/build/css/component/tooltip.css",
+    "./component/userFeedbackSummary.css": "./dist/styleD/build/css/component/userFeedbackSummary.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -510,6 +521,9 @@
       ],
       "Tooltip": [
         "./dist/Tooltip.d.ts"
+      ],
+      "UserFeedbackSummary": [
+        "./dist/UserFeedbackSummary.d.ts"
       ]
     }
   },