@guardian/stand 0.0.63 → 0.0.65

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/Select/Select.cjs

@@ -18,7 +18,7 @@ function Option({ children, theme = {}, id, ...props }) {
 		children
 	});
 }
-function ListBox({ children, theme = {} }) {
+function ListBox({ children, size, theme = {} }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	const items = [];
 	react.default.Children.forEach(children, (child, index) => {
@@ -30,20 +30,24 @@ function ListBox({ children, theme = {} }) {
 		}
 	});
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBox, {
-		css: require_styles.listBoxStyles(mergedTheme),
+		css: require_styles.listBoxStyles(mergedTheme, { size }),
 		children: items
 	});
 }
-function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
+function Select({ size = "md", isInvalid = false, theme = {}, placement, shouldFlip, children, ...props }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Form.FormInputContainer, {
 		as: react_aria_components.Select,
+		size,
 		isInvalid,
 		...props,
-		size: "md",
 		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Button, {
-			css: require_styles.buttonStyles(mergedTheme, isInvalid),
+			css: require_styles.buttonStyles(mergedTheme, {
+				size,
+				isInvalid
+			}),
 			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.SelectValue, {}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				css: require_styles.iconStyles(),
 				symbol: "keyboard_arrow_down",
 				size: "lg"
 			})]
@@ -54,6 +58,7 @@ function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...pro
 			offset: mergedTheme.shared.offset,
 			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, {
+				size,
 				theme: mergedTheme,
 				children
 			})

package/dist/components/Select/Select.d.cts

@@ -1,6 +1,6 @@
 import { OptionProps, SelectProps } from "./types.cjs";
 //#region src/components/Select/Select.d.ts
 declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Select({ isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Option, Select };

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { OptionProps, SelectProps } from "./types.js";
 //#region src/components/Select/Select.d.ts
 declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Select({ isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Option, Select };

package/dist/components/Select/Select.js

@@ -1,7 +1,7 @@
 import { mergeDeep } from "../../util/mergeDeep.js";
 import { Icon } from "../Icon/Icon.js";
 import { FormInputContainer } from "../Form/Form.js";
-import { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles } from "./styles.js";
+import { buttonStyles, defaultSelectTheme, iconStyles, listBoxItemStyles, listBoxStyles, popoverStyles } from "./styles.js";
 import React from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
@@ -16,7 +16,7 @@ function Option({ children, theme = {}, id, ...props }) {
 		children
 	});
 }
-function ListBox$1({ children, theme = {} }) {
+function ListBox$1({ children, size, theme = {} }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	const items = [];
 	React.Children.forEach(children, (child, index) => {
@@ -28,20 +28,24 @@ function ListBox$1({ children, theme = {} }) {
 		}
 	});
 	return /* @__PURE__ */ jsx(ListBox, {
-		css: listBoxStyles(mergedTheme),
+		css: listBoxStyles(mergedTheme, { size }),
 		children: items
 	});
 }
-function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
+function Select$1({ size = "md", isInvalid = false, theme = {}, placement, shouldFlip, children, ...props }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	return /* @__PURE__ */ jsxs(FormInputContainer, {
 		as: Select,
+		size,
 		isInvalid,
 		...props,
-		size: "md",
 		children: [/* @__PURE__ */ jsxs(Button, {
-			css: buttonStyles(mergedTheme, isInvalid),
+			css: buttonStyles(mergedTheme, {
+				size,
+				isInvalid
+			}),
 			children: [/* @__PURE__ */ jsx(SelectValue, {}), /* @__PURE__ */ jsx(Icon, {
+				css: iconStyles(),
 				symbol: "keyboard_arrow_down",
 				size: "lg"
 			})]
@@ -52,6 +56,7 @@ function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...p
 			offset: mergedTheme.shared.offset,
 			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ jsx(ListBox$1, {
+				size,
 				theme: mergedTheme,
 				children
 			})

package/dist/components/Select/styles.cjs

@@ -42,9 +42,9 @@ const listBoxItemStyles = (theme) => {
 		}
 	`;
 };
-const listBoxStyles = (theme) => {
+const listBoxStyles = (theme, { size }) => {
 	return _emotion_react.css`
-		${require_typography.convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
 		background-color: ${theme.shared.listBox.backgroundColor};
 		border: ${theme.shared.listBox.border};
 		box-shadow: ${theme.shared.listBox.shadow};
@@ -52,7 +52,7 @@ const listBoxStyles = (theme) => {
 		outline: none;
 	`;
 };
-const buttonStyles = (theme, isInvalid) => {
+const buttonStyles = (theme, { size, isInvalid }) => {
 	return _emotion_react.css`
 		display: ${theme.shared.button.display};
 		justify-content: ${theme.shared.button.justifyContent};
@@ -60,11 +60,11 @@ const buttonStyles = (theme, isInvalid) => {
 		background-color: ${theme.shared.button.backgroundColor};
 		border: ${theme.shared.button.border};
 		border-radius: ${theme.shared.button.borderRadius};
-		height: ${theme.shared.button.height};
+		height: ${theme[size].height};
 		padding-left: ${theme.shared.button.paddingLeft};
 		padding-right: ${theme.shared.button.paddingRight};
 		margin-top: ${theme.shared.button.marginTop};
-		${require_typography.convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
 		color: ${theme.shared.button.color};
 
 		&[data-hovered] {
@@ -90,9 +90,17 @@ const buttonStyles = (theme, isInvalid) => {
 		${isInvalid ? `border: ${theme.shared.button.error.border};` : ``}
 	`;
 };
+const iconStyles = () => {
+	return _emotion_react.css`
+		[data-open] & {
+			transform: rotate(180deg);
+		}
+	`;
+};
 //#endregion
 exports.buttonStyles = buttonStyles;
 exports.defaultSelectTheme = defaultSelectTheme;
+exports.iconStyles = iconStyles;
 exports.listBoxItemStyles = listBoxItemStyles;
 exports.listBoxStyles = listBoxStyles;
 exports.popoverStyles = popoverStyles;

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

@@ -1,5 +1,6 @@
 import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentSelect } from "../../styleD/build/typescript/component/select.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Select/styles.d.ts
 type SelectTheme = Prettify<ComponentSelect>;

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

@@ -1,5 +1,6 @@
 import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentSelect } from "../../styleD/build/typescript/component/select.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Select/styles.d.ts
 type SelectTheme = Prettify<ComponentSelect>;

package/dist/components/Select/styles.js

@@ -42,9 +42,9 @@ const listBoxItemStyles = (theme) => {
 		}
 	`;
 };
-const listBoxStyles = (theme) => {
+const listBoxStyles = (theme, { size }) => {
 	return css`
-		${convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
 		background-color: ${theme.shared.listBox.backgroundColor};
 		border: ${theme.shared.listBox.border};
 		box-shadow: ${theme.shared.listBox.shadow};
@@ -52,7 +52,7 @@ const listBoxStyles = (theme) => {
 		outline: none;
 	`;
 };
-const buttonStyles = (theme, isInvalid) => {
+const buttonStyles = (theme, { size, isInvalid }) => {
 	return css`
 		display: ${theme.shared.button.display};
 		justify-content: ${theme.shared.button.justifyContent};
@@ -60,11 +60,11 @@ const buttonStyles = (theme, isInvalid) => {
 		background-color: ${theme.shared.button.backgroundColor};
 		border: ${theme.shared.button.border};
 		border-radius: ${theme.shared.button.borderRadius};
-		height: ${theme.shared.button.height};
+		height: ${theme[size].height};
 		padding-left: ${theme.shared.button.paddingLeft};
 		padding-right: ${theme.shared.button.paddingRight};
 		margin-top: ${theme.shared.button.marginTop};
-		${convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
 		color: ${theme.shared.button.color};
 
 		&[data-hovered] {
@@ -90,5 +90,12 @@ const buttonStyles = (theme, isInvalid) => {
 		${isInvalid ? `border: ${theme.shared.button.error.border};` : ``}
 	`;
 };
+const iconStyles = () => {
+	return css`
+		[data-open] & {
+			transform: rotate(180deg);
+		}
+	`;
+};
 //#endregion
-export { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles };
+export { buttonStyles, defaultSelectTheme, iconStyles, listBoxItemStyles, listBoxStyles, popoverStyles };

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;