@guardian/stand 0.0.51 → 0.0.53

package/dist/components/TagPicker/Autocomplete.js

@@ -2,7 +2,7 @@ import { Icon } from "../Icon/Icon.js";
 import { autocompleteInputStyles, iconStyles, listboxInfoStyles, listboxItemStyles, listboxStyles } from "./styles.js";
 import { useState } from "react";
 import { css } from "@emotion/react";
-import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Collection, ComboBox, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem, Popover } from "react-aria-components";
 //#region src/components/TagPicker/Autocomplete.tsx
 /**
@@ -92,14 +92,14 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 	const [hoveredItemId, setHoveredItemId] = useState();
 	const [upOrDownKeyPressed, setUpOrDownKeyPressed] = useState(false);
 	const listBoxIsInUse = upOrDownKeyPressed || !!hoveredItemId;
-	const iconContent = icon ? /* @__PURE__ */ jsx$1(Icon, {
+	const iconContent = icon ? /* @__PURE__ */ jsx(Icon, {
 		css: iconStyles(theme),
 		children: icon
-	}) : symbol ? /* @__PURE__ */ jsx$1(Icon, {
+	}) : symbol ? /* @__PURE__ */ jsx(Icon, {
 		symbol,
 		css: iconStyles(theme)
 	}) : null;
-	return /* @__PURE__ */ jsx$1("div", {
+	return /* @__PURE__ */ jsx("div", {
 		css: [css`
 					position: relative;
 				`, cssOverrides],
@@ -123,7 +123,7 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 			menuTrigger: "focus",
 			shouldFocusWrap: true,
 			children: [
-				/* @__PURE__ */ jsx$1(Input, {
+				/* @__PURE__ */ jsx(Input, {
 					css: autocompleteInputStyles(!!iconContent, theme),
 					placeholder,
 					disabled,
@@ -136,7 +136,7 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 						}
 					} : void 0
 				}),
-				/* @__PURE__ */ jsx$1(Popover, {
+				/* @__PURE__ */ jsx(Popover, {
 					placement: "bottom",
 					css: css`
 						width: var(--trigger-width);
@@ -146,13 +146,13 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 					children: /* @__PURE__ */ jsxs(ListBox, {
 						css: (value || options.length || loading) && listboxStyles(theme),
 						autoFocus: "first",
-						renderEmptyState: () => value && !loading && /* @__PURE__ */ jsx$1("div", {
+						renderEmptyState: () => value && !loading && /* @__PURE__ */ jsx("div", {
 							css: listboxInfoStyles(theme),
 							children: "No results"
 						}),
-						children: [/* @__PURE__ */ jsx$1(Collection, {
+						children: [/* @__PURE__ */ jsx(Collection, {
 							items: options,
-							children: (item) => /* @__PURE__ */ jsx$1(ListBoxItem, {
+							children: (item) => /* @__PURE__ */ jsx(ListBoxItem, {
 								css: listboxItemStyles(theme),
 								value: item,
 								onHoverChange: (isHovering) => {
@@ -163,10 +163,10 @@ function Autocomplete({ addSelection, loading, onTextInputChange, options, label
 								},
 								children: item.name
 							}, item.id)
-						}), /* @__PURE__ */ jsx$1(ListBoxLoadMoreItem, {
+						}), /* @__PURE__ */ jsx(ListBoxLoadMoreItem, {
 							css: listboxInfoStyles(theme),
 							isLoading: loading,
-							children: /* @__PURE__ */ jsx$1("span", {
+							children: /* @__PURE__ */ jsx("span", {
 								"aria-label": "Loading",
 								children: loadingIcon ?? "Loading..."
 							})

package/dist/components/TagPicker/TagPicker.js

@@ -4,7 +4,7 @@ import { offlineSectionStyles, tagPickerStyles } from "./styles.js";
 import { TagTable } from "./TagTable.js";
 import { TagSearchWithFilters } from "./TagSearchWithFilters.js";
 import { css } from "@emotion/react";
-import { Fragment, jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/TagPicker/TagPicker.tsx
 /**
 * ## TagPicker
@@ -34,7 +34,7 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 	return /* @__PURE__ */ jsxs("div", {
 		css: [tagPickerStyles(theme), cssOverrides],
 		children: [
-			/* @__PURE__ */ jsx$1(TagSearchWithFilters, {
+			/* @__PURE__ */ jsx(TagSearchWithFilters, {
 				icon: searchIcon,
 				onSearch,
 				addSelection: addTag,
@@ -58,15 +58,15 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 						"Unfortunately, we can't fetch tag information.",
 						" ",
 						showBackupListWhenOffline && "Choose from the following tags",
-						showBackupListWhenOffline && retryConnection && /* @__PURE__ */ jsx$1(Fragment, { children: " or " }),
-						retryConnection && /* @__PURE__ */ jsx$1(Button, {
+						showBackupListWhenOffline && retryConnection && /* @__PURE__ */ jsx(Fragment, { children: " or " }),
+						retryConnection && /* @__PURE__ */ jsx(Button, {
 							size: "xs",
 							variant: "secondary",
 							onClick: () => retryConnection(),
 							children: "Retry"
 						})
 					]
-				}), showBackupListWhenOffline && /* @__PURE__ */ jsx$1(Fragment, { children: backupTagsWithoutSelected.map((tag, index) => /* @__PURE__ */ jsx$1(Button, {
+				}), showBackupListWhenOffline && /* @__PURE__ */ jsx(Fragment, { children: backupTagsWithoutSelected.map((tag, index) => /* @__PURE__ */ jsx(Button, {
 					onClick: () => addTag(tag),
 					variant: "tertiary",
 					size: "sm",
@@ -75,7 +75,7 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 					children: tag.name
 				}, index)) })]
 			}),
-			/* @__PURE__ */ jsx$1(TagTable, {
+			/* @__PURE__ */ jsx(TagTable, {
 				rows: tags,
 				canRemove,
 				removeAction: readOnly ? void 0 : removeTag,
@@ -88,7 +88,7 @@ function TagPicker({ addTag, loading, offline = false, onReorder, onSearch, opti
 				removeIcon,
 				theme: tagTableTheme
 			}),
-			!readOnly && /* @__PURE__ */ jsx$1(TagTable, {
+			!readOnly && /* @__PURE__ */ jsx(TagTable, {
 				heading: "Proposed Tags",
 				theme: proposedTagTableTheme,
 				filterRows,

package/dist/components/TagPicker/TagSearchWithFilters.js

@@ -3,7 +3,7 @@ import { filterSelectCssOverrides, modifyFilterSelectTheme, tagSearchWithFilterS
 import { Autocomplete } from "./Autocomplete.js";
 import { useEffect, useRef, useState } from "react";
 import { css } from "@emotion/react";
-import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/TagPicker/TagSearchWithFilters.tsx
 function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled, theme, autoCompleteTheme, selectTheme = {}, ...tagAutocompleteProps }) {
 	const [queryText, setQueryText] = useState("");
@@ -18,7 +18,7 @@ function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled,
 	const shouldRenderSelect = filterOptions && filterOptions.length > 1;
 	return /* @__PURE__ */ jsxs("div", {
 		css: tagSearchWithFilterStyles(theme),
-		children: [/* @__PURE__ */ jsx$1(Autocomplete, {
+		children: [/* @__PURE__ */ jsx(Autocomplete, {
 			cssOverrides: css({ flex: 1 }),
 			onTextInputChange: setQueryText,
 			addSelection: (tag) => {
@@ -30,7 +30,7 @@ function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled,
 			disabled,
 			theme: autoCompleteTheme,
 			addFirstOnEnter: true
-		}), shouldRenderSelect && /* @__PURE__ */ jsx$1(Select, {
+		}), shouldRenderSelect && /* @__PURE__ */ jsx(Select, {
 			theme: modifyFilterSelectTheme(selectTheme),
 			cssOverrides: filterSelectCssOverrides(theme),
 			isDisabled: disabled,
@@ -41,7 +41,7 @@ function TagSearchWithFilters({ addSelection, onSearch, filterOptions, disabled,
 				if (Array.isArray(selection) || selection === null) return;
 				setFilterValue(selection.toString());
 			},
-			children: filterOptions.map((data, index) => /* @__PURE__ */ jsx$1(Option, {
+			children: filterOptions.map((data, index) => /* @__PURE__ */ jsx(Option, {
 				value: data,
 				id: data.filter,
 				children: data.label

package/dist/components/TagPicker/TagTable.js

@@ -1,12 +1,12 @@
 import { tagTableAddButtonStyles, tagTableCellStyles, tagTableDragButtonStyles, tagTableHeadingStyles, tagTableRemoveButtonStyles, tagTableRowStyles, tagTableStyles, tagTableTypeBadgeStyles } from "./styles.js";
 import { useEffect, useRef, useState } from "react";
 import { css } from "@emotion/react";
-import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Button, Cell, Column, Row, Table, TableBody, TableHeader, useDragAndDrop } from "react-aria-components";
 //#region src/components/TagPicker/TagTable.tsx
 const rowToTag = (row) => "tag" in row ? row.tag : row;
 const TypeBadge = (type, theme) => {
-	return /* @__PURE__ */ jsx$1("span", {
+	return /* @__PURE__ */ jsx("span", {
 		css: tagTableTypeBadgeStyles(theme),
 		children: type
 	});
@@ -90,7 +90,7 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 	if (filtered.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		css: cssOverrides,
-		children: [heading && /* @__PURE__ */ jsx$1("div", {
+		children: [heading && /* @__PURE__ */ jsx("div", {
 			css: tagTableHeadingStyles(theme),
 			children: heading
 		}), /* @__PURE__ */ jsxs(Table, {
@@ -101,17 +101,17 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 			children: [/* @__PURE__ */ jsxs(TableHeader, {
 				hidden: true,
 				children: [
-					onReorder && /* @__PURE__ */ jsx$1(Column, {}),
-					showTagType && /* @__PURE__ */ jsx$1(Column, { children: "Type" }),
-					/* @__PURE__ */ jsx$1(Column, {
+					onReorder && /* @__PURE__ */ jsx(Column, {}),
+					showTagType && /* @__PURE__ */ jsx(Column, { children: "Type" }),
+					/* @__PURE__ */ jsx(Column, {
 						isRowHeader: true,
 						children: "Name"
 					}),
-					showTagSectionName && /* @__PURE__ */ jsx$1(Column, { children: "Section" }),
-					removeTag && /* @__PURE__ */ jsx$1(Column, {}),
-					addTag && /* @__PURE__ */ jsx$1(Column, {})
+					showTagSectionName && /* @__PURE__ */ jsx(Column, { children: "Section" }),
+					removeTag && /* @__PURE__ */ jsx(Column, {}),
+					addTag && /* @__PURE__ */ jsx(Column, {})
 				]
-			}), /* @__PURE__ */ jsx$1(TableBody, {
+			}), /* @__PURE__ */ jsx(TableBody, {
 				items: filtered,
 				dependencies: [localRows],
 				children: (item) => /* @__PURE__ */ jsxs(Row, {
@@ -119,42 +119,42 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 					css: tagTableRowStyles(canDrag, highlightFirstRow, theme),
 					textValue: rowToTag(item).name,
 					children: [
-						onReorder && /* @__PURE__ */ jsx$1(Cell, {
+						onReorder && /* @__PURE__ */ jsx(Cell, {
 							css: [css`
 											width: 1%;
 										`],
-							children: /* @__PURE__ */ jsx$1(Button, {
+							children: /* @__PURE__ */ jsx(Button, {
 								slot: "drag",
 								css: tagTableDragButtonStyles,
 								children: gripIcon
 							})
 						}),
-						showTagType && /* @__PURE__ */ jsx$1(Cell, {
+						showTagType && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											position: relative;
 											width: 15%;
 										`],
 							children: TypeBadge(rowToTag(item).type)
 						}),
-						/* @__PURE__ */ jsx$1(Cell, {
+						/* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 										width: 50%;
 									`],
 							"data-testid": `tags-table-item-${filtered.indexOf(item)}-name`,
 							children: rowToTag(item).name
 						}),
-						showTagSectionName && /* @__PURE__ */ jsx$1(Cell, {
+						showTagSectionName && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											width: 20%;
 										`],
 							children: rowToTag(item).sectionName
 						}),
-						removeTag && /* @__PURE__ */ jsx$1(Cell, {
+						removeTag && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											text-align: center;
 											width: 10%;
 										`],
-							children: canRemove(item) && /* @__PURE__ */ jsx$1(Button, {
+							children: canRemove(item) && /* @__PURE__ */ jsx(Button, {
 								css: tagTableRemoveButtonStyles,
 								onPress: () => {
 									removeTag(item);
@@ -163,12 +163,12 @@ function TagTable({ rows, filterRows, heading, showTagType, showTagSectionName,
 								children: removeIcon ?? "Remove"
 							})
 						}),
-						addTag && /* @__PURE__ */ jsx$1(Cell, {
+						addTag && /* @__PURE__ */ jsx(Cell, {
 							css: [tagTableCellStyles(theme), css`
 											text-align: center;
 											width: 10%;
 										`],
-							children: /* @__PURE__ */ jsx$1(Button, {
+							children: /* @__PURE__ */ jsx(Button, {
 								css: tagTableAddButtonStyles(theme),
 								onPress: () => {
 									addTag(item);

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.cjs

@@ -32,7 +32,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 							children: icon
 						}),
 						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
-							css: require_styles.topBarNavigationTextStyles(mergedTheme),
+							css: require_styles.topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 							children: text
 						}),
 						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
@@ -60,7 +60,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 				size: iconSize,
 				children: icon
 			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
-				css: require_styles.topBarNavigationTextStyles(mergedTheme),
+				css: require_styles.topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 				children: text
 			})]
 		})

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.js

@@ -32,7 +32,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 							children: icon
 						}),
 						/* @__PURE__ */ jsx("span", {
-							css: topBarNavigationTextStyles(mergedTheme),
+							css: topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 							children: text
 						}),
 						/* @__PURE__ */ jsx("div", {
@@ -60,7 +60,7 @@ function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChi
 				size: iconSize,
 				children: icon
 			}), /* @__PURE__ */ jsx("span", {
-				css: topBarNavigationTextStyles(mergedTheme),
+				css: topBarNavigationTextStyles(mergedTheme, { hasIcon: !!icon }),
 				children: text
 			})]
 		})

package/dist/components/TopBar/TopBarNavigation/styles.cjs

@@ -78,8 +78,8 @@ const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => _emot
 				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
 			`}
 `;
-const topBarNavigationTextStyles = (theme) => _emotion_react.css`
-	margin-left: ${theme.text.margin.left};
+const topBarNavigationTextStyles = (theme, { hasIcon }) => _emotion_react.css`
+	${hasIcon && `margin-left: ${theme.text.margin.left};`}
 `;
 const topBarNavigationTypographyStyles = (theme, size) => {
 	return size == "md" ? _emotion_react.css`

package/dist/components/TopBar/TopBarNavigation/styles.js

@@ -78,8 +78,8 @@ const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => css`
 				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
 			`}
 `;
-const topBarNavigationTextStyles = (theme) => css`
-	margin-left: ${theme.text.margin.left};
+const topBarNavigationTextStyles = (theme, { hasIcon }) => css`
+	${hasIcon && `margin-left: ${theme.text.margin.left};`}
 `;
 const topBarNavigationTypographyStyles = (theme, size) => {
 	return size == "md" ? css`

package/dist/components/Typography/Typography.cjs

@@ -1,12 +1,15 @@
 const require_mergeDeep = require("../../util/mergeDeep.cjs");
 const require_styles = require("./styles.cjs");
-let _emotion_react = require("@emotion/react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 //#region src/components/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
-	return (0, _emotion_react.jsx)(element, {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Text, {
+		elementType: element,
 		css: [require_styles.typographyStyles(require_mergeDeep.mergeDeep(require_styles.defaultTypographyTheme, theme), { variant }), cssOverrides],
-		...props
-	}, children);
+		...props,
+		children
+	});
 };
 //#endregion
 exports.Typography = Typography;

package/dist/components/Typography/Typography.d.cts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from "./types.cjs";
 
 //#region src/components/Typography/Typography.d.ts
@@ -9,9 +8,6 @@ declare const Typography: ({
   cssOverrides,
   theme,
   ...props
-}: TypographyProps) => import("react").DetailedReactHTMLElement<{
-  className?: string | undefined;
-  css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
-}, HTMLElement>;
+}: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Typography };

package/dist/components/Typography/Typography.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from "./types.js";
 
 //#region src/components/Typography/Typography.d.ts
@@ -9,9 +8,6 @@ declare const Typography: ({
   cssOverrides,
   theme,
   ...props
-}: TypographyProps) => import("react").DetailedReactHTMLElement<{
-  className?: string | undefined;
-  css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
-}, HTMLElement>;
+}: TypographyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Typography };

package/dist/components/Typography/Typography.js

@@ -1,12 +1,15 @@
 import { mergeDeep } from "../../util/mergeDeep.js";
 import { defaultTypographyTheme, typographyStyles } from "./styles.js";
-import { jsx } from "@emotion/react";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Text } from "react-aria-components";
 //#region src/components/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
-	return jsx(element, {
+	return /* @__PURE__ */ jsx(Text, {
+		elementType: element,
 		css: [typographyStyles(mergeDeep(defaultTypographyTheme, theme), { variant }), cssOverrides],
-		...props
-	}, children);
+		...props,
+		children
+	});
 };
 //#endregion
 export { Typography };

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

@@ -1,10 +1,11 @@
-import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { DefaultProps } from "../../util/types.cjs";
 import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.cjs";
 import { TypographyTheme } from "./styles.cjs";
+import { TextProps } from "react-aria-components";
 
 //#region src/components/Typography/types.d.ts
 type TypographyVariant = keyof SemanticTypography;
-interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+interface TypographyProps extends DefaultProps<TypographyTheme, TextProps['className']>, Omit<TextProps, 'elementType' | 'className'> {
   /**
    * HTML element to render with font applied to
    */

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

@@ -1,10 +1,11 @@
-import { DefaultPropsWithChildren } from "../../util/types.js";
+import { DefaultProps } from "../../util/types.js";
 import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.js";
 import { TypographyTheme } from "./styles.js";
+import { TextProps } from "react-aria-components";
 
 //#region src/components/Typography/types.d.ts
 type TypographyVariant = keyof SemanticTypography;
-interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+interface TypographyProps extends DefaultProps<TypographyTheme, TextProps['className']>, Omit<TextProps, 'elementType' | 'className'> {
   /**
    * HTML element to render with font applied to
    */

package/dist/components/UserMenu/PreferenceRadioGroup.js

@@ -1,6 +1,6 @@
 import { radioGroupLabelStyles, toggleButtonRowsGroupStyles, toggleButtonStackedGroupStyles, toggleButtonStyles } from "./styles.js";
 import { css } from "@emotion/react";
-import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
 //#region src/components/UserMenu/PreferenceRadioGroup.tsx
 function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format = "stack" }) {
@@ -8,10 +8,10 @@ function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme,
 	const buttonStyle = format === "stack" ? toggleButtonStyles(theme) : [toggleButtonStyles(theme), css({ flexBasis: "30%" })];
 	const defaultOptionId = options.find((option) => option.isDefault)?.id;
 	const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
-	return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx$1("div", {
+	return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("div", {
 		css: radioGroupLabelStyles(theme),
 		children: name
-	}), /* @__PURE__ */ jsx$1(ToggleButtonGroup, {
+	}), /* @__PURE__ */ jsx(ToggleButtonGroup, {
 		css: groupCss,
 		selectionMode: "single",
 		orientation: format === "stack" ? "vertical" : "horizontal",
@@ -24,10 +24,10 @@ function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme,
 			id: option.id,
 			css: buttonStyle,
 			style: option.buttonStyle,
-			children: [/* @__PURE__ */ jsx$1("div", {
+			children: [/* @__PURE__ */ jsx("div", {
 				style: option.labelStyle,
 				children: option.label ?? option.id
-			}), /* @__PURE__ */ jsx$1("div", { children: option.description })]
+			}), /* @__PURE__ */ jsx("div", { children: option.description })]
 		}, index))
 	})] });
 }

package/dist/index.cjs

@@ -16,6 +16,7 @@ const require_grid = require("./styleD/build/typescript/component/grid.cjs");
 const require_form = require("./styleD/build/typescript/component/form.cjs");
 const require_inlineMessage = require("./styleD/build/typescript/component/inlineMessage.cjs");
 const require_menu = require("./styleD/build/typescript/component/menu.cjs");
+const require_modal = require("./styleD/build/typescript/component/modal.cjs");
 const require_layout = require("./styleD/build/typescript/component/layout.cjs");
 const require_link = require("./styleD/build/typescript/component/link.cjs");
 const require_radioGroup = require("./styleD/build/typescript/component/radioGroup.cjs");
@@ -57,6 +58,7 @@ exports.componentIntendedAudienceSignifier = require_intendedAudienceSignifier.c
 exports.componentLayout = require_layout.componentLayout;
 exports.componentLink = require_link.componentLink;
 exports.componentMenu = require_menu.componentMenu;
+exports.componentModal = require_modal.componentModal;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
 exports.componentSelect = require_select.componentSelect;
 exports.componentTagTable = require_tagTable.componentTagTable;

package/dist/index.d.cts

@@ -9,13 +9,14 @@ import { ComponentDatePicker, componentDatePicker } from "./styleD/build/typescr
 import { ComponentFavicon, componentFavicon } from "./styleD/build/typescript/component/favicon.cjs";
 import { SemanticBreakpoints, semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.cjs";
 import { ComponentGrid, componentGrid } from "./styleD/build/typescript/component/grid.cjs";
+import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.cjs";
+import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.cjs";
 import { ComponentInlineMessage, componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.cjs";
 import { ComponentIntendedAudienceSignifier, componentIntendedAudienceSignifier } from "./styleD/build/typescript/component/intendedAudienceSignifier.cjs";
 import { ComponentLayout, componentLayout } from "./styleD/build/typescript/component/layout.cjs";
-import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.cjs";
-import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.cjs";
 import { ComponentLink, componentLink } from "./styleD/build/typescript/component/link.cjs";
 import { ComponentMenu, componentMenu } from "./styleD/build/typescript/component/menu.cjs";
+import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.cjs";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.cjs";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.cjs";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.cjs";
@@ -35,4 +36,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 ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, 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, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, 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 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 ComponentTagTable, type ComponentTextArea, type ComponentTextInput, 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, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -9,13 +9,14 @@ import { ComponentDatePicker, componentDatePicker } from "./styleD/build/typescr
 import { ComponentFavicon, componentFavicon } from "./styleD/build/typescript/component/favicon.js";
 import { SemanticBreakpoints, semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.js";
 import { ComponentGrid, componentGrid } from "./styleD/build/typescript/component/grid.js";
+import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.js";
+import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { ComponentInlineMessage, componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.js";
 import { ComponentIntendedAudienceSignifier, componentIntendedAudienceSignifier } from "./styleD/build/typescript/component/intendedAudienceSignifier.js";
 import { ComponentLayout, componentLayout } from "./styleD/build/typescript/component/layout.js";
-import { SemanticTypography, semanticTypography } from "./styleD/build/typescript/semantic/typography.js";
-import { ComponentTypography, componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { ComponentLink, componentLink } from "./styleD/build/typescript/component/link.js";
 import { ComponentMenu, componentMenu } from "./styleD/build/typescript/component/menu.js";
+import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.js";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.js";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
@@ -35,4 +36,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 ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, 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, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, 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 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 ComponentTagTable, type ComponentTextArea, type ComponentTextInput, 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, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -15,6 +15,7 @@ import { componentGrid } from "./styleD/build/typescript/component/grid.js";
 import { componentForm } from "./styleD/build/typescript/component/form.js";
 import { componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.js";
 import { componentMenu } from "./styleD/build/typescript/component/menu.js";
+import { componentModal } from "./styleD/build/typescript/component/modal.js";
 import { componentLayout } from "./styleD/build/typescript/component/layout.js";
 import { componentLink } from "./styleD/build/typescript/component/link.js";
 import { componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
@@ -35,4 +36,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, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -0,0 +1,51 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-modal-overlay-position: absolute;
+	--component-modal-overlay-top: 0;
+	--component-modal-overlay-left: 0;
+	--component-modal-overlay-width: 100%;
+	--component-modal-overlay-height: 100%;
+	--component-modal-overlay-background-color: rgba(0, 0, 0, 0.4);
+	--component-modal-overlay-overflow: clip;
+	--component-modal-overlay-z-index: 100;
+	--component-modal-modal-position: sticky;
+	--component-modal-modal-max-height: 90%;
+	--component-modal-modal-top: 50%;
+	--component-modal-modal-margin-left: 50svw;
+	--component-modal-modal-translate: -50% -50%;
+	--component-modal-modal-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+	--component-modal-modal-border-radius: 0.5rem;
+	--component-modal-modal-width: max-content;
+	--component-modal-modal-max-width: min(484px, 90svw);
+	--component-modal-modal-background-color: #ffffff;
+	--component-modal-modal-padding-top: 1rem;
+	--component-modal-modal-padding-bottom: 2rem;
+	--component-modal-modal-padding-left: 2rem;
+	--component-modal-modal-padding-right: 2rem;
+	--component-modal-dialog-container-display: grid;
+	--component-modal-dialog-container-grid-template-areas: 'dismiss' 'title'
+		'children' 'ctas';
+	--component-modal-dialog-container-grid-template-columns: 1fr;
+	--component-modal-dialog-container-grid-template-rows: auto auto 1fr auto;
+	--component-modal-dialog-dismiss-grid-area: dismiss;
+	--component-modal-dialog-dismiss-margin-left: auto;
+	--component-modal-dialog-dismiss-margin-bottom: 1rem;
+	--component-modal-dialog-dismiss-border: none;
+	--component-modal-dialog-dismiss-height: 1rem;
+	--component-modal-dialog-dismiss-width: 1rem;
+	--component-modal-dialog-dismiss-hovered-background: none;
+	--component-modal-dialog-dismiss-hovered-border: none;
+	--component-modal-dialog-title-grid-area: title;
+	--component-modal-dialog-title-margin-bottom: 1rem;
+	--component-modal-dialog-children-grid-area: children;
+	--component-modal-dialog-children-margin-bottom: 2.5rem;
+	--component-modal-dialog-ctas-grid-area: ctas;
+	--component-modal-dialog-ctas-display: flex;
+	--component-modal-dialog-ctas-flex-direction: column;
+	--component-modal-dialog-ctas-gap: 1rem;
+	--component-modal-dialog-ctas-justify-content: flex-end;
+	--component-modal-dialog-ctas-md-flex-direction: row;
+}