@guardian/stand 0.0.73 → 0.0.75

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

@@ -3,7 +3,6 @@ import { ComponentTextInput } from "../../styleD/build/typescript/component/text
 import "./types.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/TextInput/styles.d.ts
-type TextInputTheme = Prettify<ComponentTextInput>;
-type PartialTextInputTheme = Prettify<DeepPartial<ComponentTextInput>>;
-//#endregion
-export { PartialTextInputTheme, TextInputTheme };
+export type TextInputTheme = Prettify<ComponentTextInput>;
+export type PartialTextInputTheme = Prettify<DeepPartial<ComponentTextInput>>;
+//#endregion

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

@@ -2,9 +2,8 @@ import { FormInputContainerDefaultProps } from "../Form/types.cjs";
 import { TextInputTheme } from "./styles.cjs";
 import { TextFieldProps } from "react-aria-components";
 //#region src/components/TextInput/types.d.ts
-interface TextInputProps extends FormInputContainerDefaultProps<TextFieldProps, TextInputTheme> {
+export interface TextInputProps extends FormInputContainerDefaultProps<TextFieldProps, TextInputTheme> {
   /** Temporary text that occupies the text input when it is empty */
   placeholder?: string;
 }
-//#endregion
-export { TextInputProps };
+//#endregion

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

@@ -2,9 +2,8 @@ import { FormInputContainerDefaultProps } from "../Form/types.js";
 import { TextInputTheme } from "./styles.js";
 import { TextFieldProps } from "react-aria-components";
 //#region src/components/TextInput/types.d.ts
-interface TextInputProps extends FormInputContainerDefaultProps<TextFieldProps, TextInputTheme> {
+export interface TextInputProps extends FormInputContainerDefaultProps<TextFieldProps, TextInputTheme> {
   /** Temporary text that occupies the text input when it is empty */
   placeholder?: string;
 }
-//#endregion
-export { TextInputProps };
+//#endregion

package/dist/components/TextListInput/TextListInput.d.cts

@@ -1,5 +1,4 @@
 import { TextListInputProps } from "./types.cjs";
 //#region src/components/TextListInput/TextListInput.d.ts
-declare const TextListInput: ({ label, size, placeholder, initialData, errorMessage, onChange, theme, cssOverrides, className }: TextListInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { TextListInput };
+export declare const TextListInput: ({ label, size, placeholder, initialData, errorMessage, onChange, theme, cssOverrides, className }: TextListInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/TextListInput/TextListInput.d.ts

@@ -1,5 +1,4 @@
 import { TextListInputProps } from "./types.js";
 //#region src/components/TextListInput/TextListInput.d.ts
-declare const TextListInput: ({ label, size, placeholder, initialData, errorMessage, onChange, theme, cssOverrides, className }: TextListInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { TextListInput };
+export declare const TextListInput: ({ label, size, placeholder, initialData, errorMessage, onChange, theme, cssOverrides, className }: TextListInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

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

@@ -2,7 +2,6 @@ import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentTextListInput } from "../../styleD/build/typescript/component/textListInput.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/TextListInput/styles.d.ts
-type TextListInputTheme = Prettify<ComponentTextListInput>;
-type PartialTextListInputTheme = Prettify<DeepPartial<TextListInputTheme>>;
-//#endregion
-export { PartialTextListInputTheme, TextListInputTheme };
+export type TextListInputTheme = Prettify<ComponentTextListInput>;
+export type PartialTextListInputTheme = Prettify<DeepPartial<TextListInputTheme>>;
+//#endregion

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

@@ -2,7 +2,6 @@ import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentTextListInput } from "../../styleD/build/typescript/component/textListInput.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/TextListInput/styles.d.ts
-type TextListInputTheme = Prettify<ComponentTextListInput>;
-type PartialTextListInputTheme = Prettify<DeepPartial<TextListInputTheme>>;
-//#endregion
-export { PartialTextListInputTheme, TextListInputTheme };
+export type TextListInputTheme = Prettify<ComponentTextListInput>;
+export type PartialTextListInputTheme = Prettify<DeepPartial<TextListInputTheme>>;
+//#endregion

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

@@ -3,7 +3,7 @@ import { PartialTextInputTheme } from "../TextInput/styles.cjs";
 import "../../TextInput.cjs";
 import { TextListInputTheme } from "./styles.cjs";
 //#region src/components/TextListInput/types.d.ts
-type TextListInputProps = DefaultProps<TextListInputTheme> & {
+export type TextListInputProps = DefaultProps<TextListInputTheme> & {
   /**
    * Label text for text list group
    */
@@ -29,5 +29,4 @@ type TextListInputProps = DefaultProps<TextListInputTheme> & {
    */
   onChange: (values: string[]) => void;
 };
-//#endregion
-export { TextListInputProps };
+//#endregion

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

@@ -3,7 +3,7 @@ import { PartialTextInputTheme } from "../TextInput/styles.js";
 import "../../TextInput.js";
 import { TextListInputTheme } from "./styles.js";
 //#region src/components/TextListInput/types.d.ts
-type TextListInputProps = DefaultProps<TextListInputTheme> & {
+export type TextListInputProps = DefaultProps<TextListInputTheme> & {
   /**
    * Label text for text list group
    */
@@ -29,5 +29,4 @@ type TextListInputProps = DefaultProps<TextListInputTheme> & {
    */
   onChange: (values: string[]) => void;
 };
-//#endregion
-export { TextListInputProps };
+//#endregion

package/dist/components/Tile/Tile.cjs

@@ -0,0 +1,102 @@
+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 _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Tile/Tile.tsx
+function getTileIndicator(interactionMode, isSelected) {
+	switch (interactionMode) {
+		case "clickable": return "arrow_forward";
+		case "selectable": return isSelected ? "radio_button_checked" : "radio_button_unchecked";
+		case "multi-select": return isSelected ? "check_box" : "check_box_outline_blank";
+		default: return "arrow_forward";
+	}
+}
+function TileContent({ children, description, typography = "bodyBoldSm", descriptionTypography = "bodySm", icon = "account_balance", size = "md", interactionMode, isSelected, theme }) {
+	const indicator = getTileIndicator(interactionMode, isSelected);
+	const hasDescription = Boolean(description);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: require_styles.tileContentStyles(theme, { size }),
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.tileTextStyles(theme),
+			children: [icon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				size,
+				cssOverrides: require_styles.tileIconStyles(theme),
+				children: icon
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: typography,
+				theme: { color: theme.shared.color },
+				cssOverrides: require_styles.tileTitleStyles(theme),
+				children
+			})]
+		}), interactionMode !== "clickable" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+			symbol: indicator,
+			size,
+			cssOverrides: require_styles.tileArrowStyles(theme)
+		})]
+	}), (hasDescription || interactionMode === "clickable") && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: require_styles.tileBottomRowStyles(),
+		children: [description && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: descriptionTypography,
+			theme: { color: theme.shared.descriptionColor },
+			cssOverrides: require_styles.tileDescriptionStyles(theme),
+			children: description
+		}), interactionMode === "clickable" && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+			symbol: indicator,
+			size,
+			cssOverrides: require_styles.tileArrowStyles(theme)
+		})]
+	})] });
+}
+function ClickableLinkTile({ theme = {}, cssOverrides, children, description, typography, descriptionTypography, icon, size = "md", ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTileTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Link, {
+		...props,
+		css: [require_styles.tileStyles(mergedTheme, { size }), cssOverrides],
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TileContent, {
+			children,
+			description,
+			typography,
+			descriptionTypography,
+			icon,
+			size,
+			interactionMode: "clickable",
+			theme: mergedTheme
+		})
+	});
+}
+function SelectionTile({ interactionMode, value, isSelected, onSelectionChange, theme = {}, cssOverrides, children, description, typography, descriptionTypography, icon, size = "md", ...buttonProps }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTileTheme, theme);
+	const handlePress = () => {
+		if (interactionMode === "selectable") {
+			if (!isSelected) onSelectionChange(value);
+		} else onSelectionChange(value, !isSelected);
+	};
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+		...buttonProps,
+		"aria-pressed": isSelected,
+		"data-selected": isSelected || void 0,
+		onPress: handlePress,
+		css: [require_styles.selectableTileStyles(mergedTheme, { size }), cssOverrides],
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TileContent, {
+			children,
+			description,
+			typography,
+			descriptionTypography,
+			icon,
+			size,
+			interactionMode,
+			isSelected,
+			theme: mergedTheme
+		})
+	});
+}
+function isClickableTile(props) {
+	return typeof props.href === "string";
+}
+function Tile(props) {
+	return isClickableTile(props) ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ClickableLinkTile, { ...props }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SelectionTile, { ...props });
+}
+//#endregion
+exports.Tile = Tile;

package/dist/components/Tile/Tile.d.cts

@@ -0,0 +1,4 @@
+import { TileProps } from "./types.cjs";
+//#region src/components/Tile/Tile.d.ts
+export declare function Tile(props: TileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/Tile/Tile.d.ts

@@ -0,0 +1,4 @@
+import { TileProps } from "./types.js";
+//#region src/components/Tile/Tile.d.ts
+export declare function Tile(props: TileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/Tile/Tile.js

@@ -0,0 +1,102 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { Typography } from "../Typography/Typography.js";
+import { defaultTileTheme, selectableTileStyles, tileArrowStyles, tileBottomRowStyles, tileContentStyles, tileDescriptionStyles, tileIconStyles, tileStyles, tileTextStyles, tileTitleStyles } from "./styles.js";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Button, Link } from "react-aria-components";
+//#region src/components/Tile/Tile.tsx
+function getTileIndicator(interactionMode, isSelected) {
+	switch (interactionMode) {
+		case "clickable": return "arrow_forward";
+		case "selectable": return isSelected ? "radio_button_checked" : "radio_button_unchecked";
+		case "multi-select": return isSelected ? "check_box" : "check_box_outline_blank";
+		default: return "arrow_forward";
+	}
+}
+function TileContent({ children, description, typography = "bodyBoldSm", descriptionTypography = "bodySm", icon = "account_balance", size = "md", interactionMode, isSelected, theme }) {
+	const indicator = getTileIndicator(interactionMode, isSelected);
+	const hasDescription = Boolean(description);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		css: tileContentStyles(theme, { size }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			css: tileTextStyles(theme),
+			children: [icon && /* @__PURE__ */ jsx(Icon, {
+				size,
+				cssOverrides: tileIconStyles(theme),
+				children: icon
+			}), /* @__PURE__ */ jsx(Typography, {
+				variant: typography,
+				theme: { color: theme.shared.color },
+				cssOverrides: tileTitleStyles(theme),
+				children
+			})]
+		}), interactionMode !== "clickable" && /* @__PURE__ */ jsx(Icon, {
+			symbol: indicator,
+			size,
+			cssOverrides: tileArrowStyles(theme)
+		})]
+	}), (hasDescription || interactionMode === "clickable") && /* @__PURE__ */ jsxs("div", {
+		css: tileBottomRowStyles(),
+		children: [description && /* @__PURE__ */ jsx(Typography, {
+			variant: descriptionTypography,
+			theme: { color: theme.shared.descriptionColor },
+			cssOverrides: tileDescriptionStyles(theme),
+			children: description
+		}), interactionMode === "clickable" && /* @__PURE__ */ jsx(Icon, {
+			symbol: indicator,
+			size,
+			cssOverrides: tileArrowStyles(theme)
+		})]
+	})] });
+}
+function ClickableLinkTile({ theme = {}, cssOverrides, children, description, typography, descriptionTypography, icon, size = "md", ...props }) {
+	const mergedTheme = mergeDeep(defaultTileTheme, theme);
+	return /* @__PURE__ */ jsx(Link, {
+		...props,
+		css: [tileStyles(mergedTheme, { size }), cssOverrides],
+		children: /* @__PURE__ */ jsx(TileContent, {
+			children,
+			description,
+			typography,
+			descriptionTypography,
+			icon,
+			size,
+			interactionMode: "clickable",
+			theme: mergedTheme
+		})
+	});
+}
+function SelectionTile({ interactionMode, value, isSelected, onSelectionChange, theme = {}, cssOverrides, children, description, typography, descriptionTypography, icon, size = "md", ...buttonProps }) {
+	const mergedTheme = mergeDeep(defaultTileTheme, theme);
+	const handlePress = () => {
+		if (interactionMode === "selectable") {
+			if (!isSelected) onSelectionChange(value);
+		} else onSelectionChange(value, !isSelected);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		"aria-pressed": isSelected,
+		"data-selected": isSelected || void 0,
+		onPress: handlePress,
+		css: [selectableTileStyles(mergedTheme, { size }), cssOverrides],
+		children: /* @__PURE__ */ jsx(TileContent, {
+			children,
+			description,
+			typography,
+			descriptionTypography,
+			icon,
+			size,
+			interactionMode,
+			isSelected,
+			theme: mergedTheme
+		})
+	});
+}
+function isClickableTile(props) {
+	return typeof props.href === "string";
+}
+function Tile(props) {
+	return isClickableTile(props) ? /* @__PURE__ */ jsx(ClickableLinkTile, { ...props }) : /* @__PURE__ */ jsx(SelectionTile, { ...props });
+}
+//#endregion
+export { Tile };

package/dist/components/Tile/styles.cjs

@@ -0,0 +1,175 @@
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_tile = require("../../styleD/build/typescript/component/tile.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Tile/styles.ts
+const defaultTileTheme = require_tile.componentTile;
+const tileStyles = (theme, { size }) => _emotion_react.css`
+	display: ${theme.shared.display};
+	flex-direction: ${theme.shared.flexDirection};
+	align-items: ${theme.shared.alignItems};
+	justify-content: ${theme.shared.justifyContent};
+	gap: ${theme.shared.gap};
+	min-height: ${theme[size].minHeight};
+	padding: ${theme[size].paddingY} ${theme[size].paddingX};
+	border: ${theme.shared.borderWidth} ${theme.shared.borderStyle}
+		${theme.shared.borderColor};
+	border-radius: ${theme.shared.borderRadius};
+	background-color: ${theme.shared.backgroundColor};
+	color: ${theme.shared.color};
+	text-decoration: ${theme.shared.textDecoration};
+	cursor: ${theme.shared.cursor};
+	width: ${theme[size].width};
+	max-width: ${theme.shared.maxWidth};
+	box-sizing: border-box;
+	font: inherit;
+	text-align: left;
+
+	${require_mq.until.md} {
+		width: 100%;
+	}
+
+	&[data-hovered] {
+		background-color: ${theme.shared.hover.backgroundColor};
+		border-color: ${theme.shared.hover.borderColor};
+	}
+
+	&[data-pressed] {
+		background-color: ${theme.shared.pressed.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-selected] {
+		background-color: ${theme.shared.pressed.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-focus-visible] {
+		outline: ${theme.shared.focusVisible.outline};
+		outline-offset: ${theme.shared.focusVisible.outlineOffset};
+	}
+
+	&[data-disabled] {
+		color: ${theme.shared.disabled.color};
+		border-color: ${theme.shared.disabled.borderColor};
+		background-color: ${theme.shared.disabled.backgroundColor};
+		cursor: ${theme.shared.disabled.cursor};
+	}
+`;
+const selectableTileStyles = (theme, { size }) => _emotion_react.css`
+	${tileStyles(theme, { size })}
+
+	&[data-hovered] {
+		background-color: ${theme.shared.selectableTile.shared.hover.backgroundColor};
+		border-color: ${theme.shared.hover.borderColor};
+	}
+
+	&[data-pressed] {
+		background-color: ${theme.shared.selectableTile.shared.pressed.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-selected] {
+		background-color: ${theme.shared.selectableTile.shared.selected.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-focus-visible] {
+		background-color: ${theme.shared.selectableTile.shared.focusVisible.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-selected][data-hovered] {
+		background-color: ${theme.shared.selectableTile.shared.selected.hover.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-selected][data-pressed] {
+		background-color: ${theme.shared.selectableTile.shared.selected.pressed.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-selected][data-focus-visible] {
+		background-color: ${theme.shared.selectableTile.shared.selected.focusVisible.backgroundColor};
+		border-color: ${theme.shared.pressed.borderColor};
+	}
+
+	&[data-disabled] {
+		color: ${theme.shared.disabled.color};
+		border-color: ${theme.shared.disabled.borderColor};
+		background-color: ${theme.shared.disabled.backgroundColor};
+		cursor: ${theme.shared.disabled.cursor};
+	}
+`;
+const tileContentStyles = (theme, { size }) => _emotion_react.css`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: ${theme[size].gap};
+	width: 100%;
+	min-width: 0;
+`;
+const tileTextStyles = (theme) => _emotion_react.css`
+	color: ${theme.shared.color};
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	gap: 0.5rem;
+`;
+const tileTitleStyles = (theme) => _emotion_react.css`
+	display: block;
+	line-height: 1.2;
+	color: ${theme.shared.color};
+
+	[data-disabled] & {
+		color: ${theme.shared.disabled.color};
+	}
+`;
+const tileDescriptionStyles = (theme) => _emotion_react.css`
+	color: ${theme.shared.descriptionColor};
+	display: block;
+	line-height: 1.2;
+	min-width: 0;
+	flex: 1;
+
+	[data-disabled] & {
+		color: ${theme.shared.disabled.color};
+	}
+`;
+const tileBottomRowStyles = () => _emotion_react.css`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	width: 100%;
+	min-width: 0;
+`;
+const tileArrowStyles = (theme) => _emotion_react.css`
+	color: ${theme.shared.tileArrow.shared.color};
+	flex-shrink: 0;
+	margin-left: auto;
+
+	[data-disabled] & {
+		color: ${theme.shared.tileArrow.shared.disabled.color};
+	}
+`;
+const tileIconStyles = (theme) => _emotion_react.css`
+	color: ${theme.shared.tileIcon.shared.color};
+	flex-shrink: 0;
+	margin-right: 0.25rem;
+
+	[data-disabled] & {
+		color: ${theme.shared.tileIcon.shared.disabled.color};
+	}
+`;
+//#endregion
+exports.defaultTileTheme = defaultTileTheme;
+exports.selectableTileStyles = selectableTileStyles;
+exports.tileArrowStyles = tileArrowStyles;
+exports.tileBottomRowStyles = tileBottomRowStyles;
+exports.tileContentStyles = tileContentStyles;
+exports.tileDescriptionStyles = tileDescriptionStyles;
+exports.tileIconStyles = tileIconStyles;
+exports.tileStyles = tileStyles;
+exports.tileTextStyles = tileTextStyles;
+exports.tileTitleStyles = tileTitleStyles;

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

@@ -0,0 +1,7 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentTile } from "../../styleD/build/typescript/component/tile.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Tile/styles.d.ts
+export type TileTheme = Prettify<ComponentTile>;
+export type PartialTileTheme = Prettify<DeepPartial<TileTheme>>;
+//#endregion

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

@@ -0,0 +1,7 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentTile } from "../../styleD/build/typescript/component/tile.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Tile/styles.d.ts
+export type TileTheme = Prettify<ComponentTile>;
+export type PartialTileTheme = Prettify<DeepPartial<TileTheme>>;
+//#endregion