@guardian/stand 0.0.58 → 0.0.60

package/dist/HtmlPreviewLoader.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_htmlPreviewLoader = require("./styleD/build/typescript/component/htmlPreviewLoader.cjs");
+const require_HtmlPreview = require("./components/HtmlPreviewLoader/HtmlPreview.cjs");
+const require_HtmlPreviewLoader = require("./components/HtmlPreviewLoader/HtmlPreviewLoader.cjs");
+exports.HtmlPreview = require_HtmlPreview.HtmlPreview;
+exports.HtmlPreviewLoader = require_HtmlPreviewLoader.HtmlPreviewLoader;
+exports.componentHtmlPreviewLoader = require_htmlPreviewLoader.componentHtmlPreviewLoader;

package/dist/HtmlPreviewLoader.d.cts

@@ -0,0 +1,4 @@
+import { ComponentHtmlPreviewLoader, componentHtmlPreviewLoader } from "./styleD/build/typescript/component/htmlPreviewLoader.cjs";
+import { HtmlPreviewLoader } from "./components/HtmlPreviewLoader/HtmlPreviewLoader.cjs";
+import { HtmlPreview } from "./components/HtmlPreviewLoader/HtmlPreview.cjs";
+export { type ComponentHtmlPreviewLoader, HtmlPreview, HtmlPreviewLoader, componentHtmlPreviewLoader };

package/dist/HtmlPreviewLoader.d.ts

@@ -0,0 +1,4 @@
+import { ComponentHtmlPreviewLoader, componentHtmlPreviewLoader } from "./styleD/build/typescript/component/htmlPreviewLoader.js";
+import { HtmlPreviewLoader } from "./components/HtmlPreviewLoader/HtmlPreviewLoader.js";
+import { HtmlPreview } from "./components/HtmlPreviewLoader/HtmlPreview.js";
+export { type ComponentHtmlPreviewLoader, HtmlPreview, HtmlPreviewLoader, componentHtmlPreviewLoader };

package/dist/HtmlPreviewLoader.js

@@ -0,0 +1,4 @@
+import { componentHtmlPreviewLoader } from "./styleD/build/typescript/component/htmlPreviewLoader.js";
+import { HtmlPreview } from "./components/HtmlPreviewLoader/HtmlPreview.js";
+import { HtmlPreviewLoader } from "./components/HtmlPreviewLoader/HtmlPreviewLoader.js";
+export { HtmlPreview, HtmlPreviewLoader, componentHtmlPreviewLoader };

package/dist/components/HtmlPreviewLoader/HtmlPreview.cjs

@@ -0,0 +1,99 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_AlertBanner = require("../AlertBanner/AlertBanner.cjs");
+const require_Button = require("../Button/Button.cjs");
+const require_Typography = require("../Typography/Typography.cjs");
+const require_RadioGroup = require("../RadioGroup/RadioGroup.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react = require("@emotion/react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/HtmlPreviewLoader/HtmlPreview.tsx
+const defaultWidthOptions = [
+	320,
+	375,
+	425,
+	650
+];
+const HtmlPreview = ({ html, isLoading = false, errorMessage, attemptLoad, minHeight = 600, title, widthOptions = defaultWidthOptions, defaultWidth = 425, frameBackground = "white", allowReloading = false, cssOverrides, theme }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultHtmlPreviewLoaderTheme, theme ?? {});
+	const [frameWidth, setFrameWidth] = (0, react.useState)(defaultWidth);
+	const showReloadButton = allowReloading && !errorMessage && !isLoading && !!attemptLoad;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: [require_styles.htmlPreviewLoaderStyles(mergedTheme), cssOverrides],
+		children: [
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("header", {
+				css: require_styles.headerStyles(),
+				children: [typeof title === "string" ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+					variant: "titleMd",
+					children: title
+				}) : title, widthOptions.length > 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_RadioGroup.RadioGroup, {
+					size: "sm",
+					label: "width",
+					orientation: "horizontal",
+					formInputContainerTheme: { shared: { container: {
+						width: "unset",
+						flexDirection: "row"
+					} } },
+					cssOverrides: (0, _emotion_react.css)({ alignItems: "center" }),
+					value: String(frameWidth),
+					onChange: (value) => setFrameWidth(Number(value)),
+					children: widthOptions.map((width, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_RadioGroup.Radio, {
+						value: String(width),
+						children: [width, "px"]
+					}, index))
+				})]
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+				css: [require_styles.previewFrameStyle(mergedTheme), { minHeight }],
+				children: [html && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("iframe", {
+					sandbox: "",
+					style: {
+						minWidth: frameWidth,
+						maxWidth: frameWidth,
+						background: frameBackground
+					},
+					css: require_styles.iframeStyle(isLoading || !!errorMessage),
+					title: "preview",
+					srcDoc: html
+				}), showReloadButton && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+					css: require_styles.reloadButtonStyle(mergedTheme),
+					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.Button, {
+						icon: "refresh",
+						size: "md",
+						variant: "primary",
+						onPress: attemptLoad,
+						children: "reload"
+					})
+				})]
+			}),
+			isLoading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.centeredStyle(),
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+					css: require_styles.loadingIconStyle(mergedTheme),
+					symbol: "progress_activity",
+					cssOverrides: require_styles.spinAnimationStyle()
+				})
+			}),
+			errorMessage && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.centeredStyle(),
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_AlertBanner.AlertBanner, {
+					showIcon: true,
+					level: "error",
+					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+						css: require_styles.alertBannerContentsStyle(),
+						children: [errorMessage, attemptLoad && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.Button, {
+							icon: "refresh",
+							size: "sm",
+							variant: "secondary",
+							onPress: attemptLoad,
+							children: "retry"
+						})]
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+exports.HtmlPreview = HtmlPreview;

package/dist/components/HtmlPreviewLoader/HtmlPreview.d.cts

@@ -0,0 +1,19 @@
+import { HtmlPreviewProps } from "./types.cjs";
+
+//#region src/components/HtmlPreviewLoader/HtmlPreview.d.ts
+declare const HtmlPreview: ({
+  html,
+  isLoading,
+  errorMessage,
+  attemptLoad,
+  minHeight,
+  title,
+  widthOptions,
+  defaultWidth,
+  frameBackground,
+  allowReloading,
+  cssOverrides,
+  theme
+}: HtmlPreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { HtmlPreview };

package/dist/components/HtmlPreviewLoader/HtmlPreview.d.ts

@@ -0,0 +1,19 @@
+import { HtmlPreviewProps } from "./types.js";
+
+//#region src/components/HtmlPreviewLoader/HtmlPreview.d.ts
+declare const HtmlPreview: ({
+  html,
+  isLoading,
+  errorMessage,
+  attemptLoad,
+  minHeight,
+  title,
+  widthOptions,
+  defaultWidth,
+  frameBackground,
+  allowReloading,
+  cssOverrides,
+  theme
+}: HtmlPreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { HtmlPreview };

package/dist/components/HtmlPreviewLoader/HtmlPreview.js

@@ -0,0 +1,99 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { AlertBanner } from "../AlertBanner/AlertBanner.js";
+import { Button } from "../Button/Button.js";
+import { Typography } from "../Typography/Typography.js";
+import { Radio, RadioGroup } from "../RadioGroup/RadioGroup.js";
+import { alertBannerContentsStyle, centeredStyle, defaultHtmlPreviewLoaderTheme, headerStyles, htmlPreviewLoaderStyles, iframeStyle, loadingIconStyle, previewFrameStyle, reloadButtonStyle, spinAnimationStyle } from "./styles.js";
+import { useState } from "react";
+import { css } from "@emotion/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/HtmlPreviewLoader/HtmlPreview.tsx
+const defaultWidthOptions = [
+	320,
+	375,
+	425,
+	650
+];
+const HtmlPreview = ({ html, isLoading = false, errorMessage, attemptLoad, minHeight = 600, title, widthOptions = defaultWidthOptions, defaultWidth = 425, frameBackground = "white", allowReloading = false, cssOverrides, theme }) => {
+	const mergedTheme = mergeDeep(defaultHtmlPreviewLoaderTheme, theme ?? {});
+	const [frameWidth, setFrameWidth] = useState(defaultWidth);
+	const showReloadButton = allowReloading && !errorMessage && !isLoading && !!attemptLoad;
+	return /* @__PURE__ */ jsxs("div", {
+		css: [htmlPreviewLoaderStyles(mergedTheme), cssOverrides],
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				css: headerStyles(),
+				children: [typeof title === "string" ? /* @__PURE__ */ jsx(Typography, {
+					variant: "titleMd",
+					children: title
+				}) : title, widthOptions.length > 0 && /* @__PURE__ */ jsx(RadioGroup, {
+					size: "sm",
+					label: "width",
+					orientation: "horizontal",
+					formInputContainerTheme: { shared: { container: {
+						width: "unset",
+						flexDirection: "row"
+					} } },
+					cssOverrides: css({ alignItems: "center" }),
+					value: String(frameWidth),
+					onChange: (value) => setFrameWidth(Number(value)),
+					children: widthOptions.map((width, index) => /* @__PURE__ */ jsxs(Radio, {
+						value: String(width),
+						children: [width, "px"]
+					}, index))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				css: [previewFrameStyle(mergedTheme), { minHeight }],
+				children: [html && /* @__PURE__ */ jsx("iframe", {
+					sandbox: "",
+					style: {
+						minWidth: frameWidth,
+						maxWidth: frameWidth,
+						background: frameBackground
+					},
+					css: iframeStyle(isLoading || !!errorMessage),
+					title: "preview",
+					srcDoc: html
+				}), showReloadButton && /* @__PURE__ */ jsx("div", {
+					css: reloadButtonStyle(mergedTheme),
+					children: /* @__PURE__ */ jsx(Button, {
+						icon: "refresh",
+						size: "md",
+						variant: "primary",
+						onPress: attemptLoad,
+						children: "reload"
+					})
+				})]
+			}),
+			isLoading && /* @__PURE__ */ jsx("div", {
+				css: centeredStyle(),
+				children: /* @__PURE__ */ jsx(Icon, {
+					css: loadingIconStyle(mergedTheme),
+					symbol: "progress_activity",
+					cssOverrides: spinAnimationStyle()
+				})
+			}),
+			errorMessage && /* @__PURE__ */ jsx("div", {
+				css: centeredStyle(),
+				children: /* @__PURE__ */ jsx(AlertBanner, {
+					showIcon: true,
+					level: "error",
+					children: /* @__PURE__ */ jsxs("div", {
+						css: alertBannerContentsStyle(),
+						children: [errorMessage, attemptLoad && /* @__PURE__ */ jsx(Button, {
+							icon: "refresh",
+							size: "sm",
+							variant: "secondary",
+							onPress: attemptLoad,
+							children: "retry"
+						})]
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { HtmlPreview };

package/dist/components/HtmlPreviewLoader/HtmlPreviewLoader.cjs

@@ -0,0 +1,27 @@
+const require_HtmlPreview = require("./HtmlPreview.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/HtmlPreviewLoader/HtmlPreviewLoader.tsx
+const HtmlPreviewLoader = (props) => {
+	const { fetchHtml, ...rest } = props;
+	const [html, setHtml] = (0, react.useState)();
+	const [error, setError] = (0, react.useState)();
+	const [isLoading, setIsLoading] = (0, react.useState)(true);
+	const attemptLoad = (0, react.useCallback)(() => {
+		setIsLoading(true);
+		setError(void 0);
+		fetchHtml().then(setHtml).catch(setError).finally(() => setIsLoading(false));
+	}, [fetchHtml]);
+	(0, react.useEffect)(() => {
+		attemptLoad();
+	}, [attemptLoad]);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_HtmlPreview.HtmlPreview, {
+		html,
+		isLoading,
+		errorMessage: error ? "failed to load" : void 0,
+		attemptLoad,
+		...rest
+	});
+};
+//#endregion
+exports.HtmlPreviewLoader = HtmlPreviewLoader;

package/dist/components/HtmlPreviewLoader/HtmlPreviewLoader.d.cts

@@ -0,0 +1,6 @@
+import { HtmlPreviewLoaderProps } from "./types.cjs";
+
+//#region src/components/HtmlPreviewLoader/HtmlPreviewLoader.d.ts
+declare const HtmlPreviewLoader: (props: HtmlPreviewLoaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { HtmlPreviewLoader };

package/dist/components/HtmlPreviewLoader/HtmlPreviewLoader.d.ts

@@ -0,0 +1,6 @@
+import { HtmlPreviewLoaderProps } from "./types.js";
+
+//#region src/components/HtmlPreviewLoader/HtmlPreviewLoader.d.ts
+declare const HtmlPreviewLoader: (props: HtmlPreviewLoaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { HtmlPreviewLoader };

package/dist/components/HtmlPreviewLoader/HtmlPreviewLoader.js

@@ -0,0 +1,27 @@
+import { HtmlPreview } from "./HtmlPreview.js";
+import { useCallback, useEffect, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/HtmlPreviewLoader/HtmlPreviewLoader.tsx
+const HtmlPreviewLoader = (props) => {
+	const { fetchHtml, ...rest } = props;
+	const [html, setHtml] = useState();
+	const [error, setError] = useState();
+	const [isLoading, setIsLoading] = useState(true);
+	const attemptLoad = useCallback(() => {
+		setIsLoading(true);
+		setError(void 0);
+		fetchHtml().then(setHtml).catch(setError).finally(() => setIsLoading(false));
+	}, [fetchHtml]);
+	useEffect(() => {
+		attemptLoad();
+	}, [attemptLoad]);
+	return /* @__PURE__ */ jsx(HtmlPreview, {
+		html,
+		isLoading,
+		errorMessage: error ? "failed to load" : void 0,
+		attemptLoad,
+		...rest
+	});
+};
+//#endregion
+export { HtmlPreviewLoader };

package/dist/components/HtmlPreviewLoader/styles.cjs

@@ -0,0 +1,96 @@
+const require_htmlPreviewLoader = require("../../styleD/build/typescript/component/htmlPreviewLoader.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/HtmlPreviewLoader/styles.ts
+const defaultHtmlPreviewLoaderTheme = require_htmlPreviewLoader.componentHtmlPreviewLoader;
+const htmlPreviewLoaderStyles = (theme) => {
+	return _emotion_react.css`
+		background-color: ${theme.shared.color.background};
+		color: ${theme.shared.color.text};
+		padding-top: ${theme.paddingTop};
+		padding-bottom: ${theme.paddingBottom};
+		padding-left: ${theme.paddingLeft};
+		padding-right: ${theme.paddingRight};
+		position: relative;
+	`;
+};
+const headerStyles = () => {
+	return _emotion_react.css`
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	`;
+};
+const previewFrameStyle = ({ previewFrame }) => {
+	return _emotion_react.css`
+		border-color: ${previewFrame.borderColor};
+		border-style: ${previewFrame.borderStyle};
+		border-width: ${previewFrame.borderWidth};
+		background-color: ${previewFrame.backgroundColor};
+		padding-top: ${previewFrame.paddingTop};
+		padding-bottom: ${previewFrame.paddingBottom};
+		padding-left: ${previewFrame.paddingLeft};
+		padding-right: ${previewFrame.paddingRight};
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		position: relative;
+	`;
+};
+const iframeStyle = (isNotLoaded) => {
+	return _emotion_react.css`
+		border: none;
+		transition: 'filter 0.25s';
+		${isNotLoaded ? `
+			filter: blur(3px);
+			pointer-events: none;	
+		` : ""}
+	`;
+};
+const reloadButtonStyle = ({ previewFrame }) => {
+	return _emotion_react.css`
+		position: absolute;
+		bottom: ${previewFrame.paddingBottom};
+		right: ${previewFrame.paddingRight};
+	`;
+};
+const loadingIconStyle = ({ loadingIcon }) => {
+	return _emotion_react.css`
+		font-size: ${loadingIcon.size};
+		color: ${loadingIcon.color};
+	`;
+};
+const spinAnimationStyle = () => {
+	return _emotion_react.css`
+		animation: ${(0, _emotion_react.keyframes)({
+		from: { transform: "rotate(0deg)" },
+		to: { transform: "rotate(360deg)" }
+	})} 1s linear infinite;
+	`;
+};
+const centeredStyle = () => {
+	return _emotion_react.css`
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+	`;
+};
+const alertBannerContentsStyle = () => {
+	return _emotion_react.css`
+		display: flex;
+		gap: 10;
+		align-items: center;
+	`;
+};
+//#endregion
+exports.alertBannerContentsStyle = alertBannerContentsStyle;
+exports.centeredStyle = centeredStyle;
+exports.defaultHtmlPreviewLoaderTheme = defaultHtmlPreviewLoaderTheme;
+exports.headerStyles = headerStyles;
+exports.htmlPreviewLoaderStyles = htmlPreviewLoaderStyles;
+exports.iframeStyle = iframeStyle;
+exports.loadingIconStyle = loadingIconStyle;
+exports.previewFrameStyle = previewFrameStyle;
+exports.reloadButtonStyle = reloadButtonStyle;
+exports.spinAnimationStyle = spinAnimationStyle;

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

@@ -0,0 +1,8 @@
+import { Prettify } from "../../util/types.cjs";
+import { ComponentHtmlPreviewLoader } from "../../styleD/build/typescript/component/htmlPreviewLoader.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/HtmlPreviewLoader/styles.d.ts
+type HtmlPreviewLoaderTheme = Prettify<ComponentHtmlPreviewLoader>;
+//#endregion
+export { HtmlPreviewLoaderTheme };

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

@@ -0,0 +1,8 @@
+import { Prettify } from "../../util/types.js";
+import { ComponentHtmlPreviewLoader } from "../../styleD/build/typescript/component/htmlPreviewLoader.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/HtmlPreviewLoader/styles.d.ts
+type HtmlPreviewLoaderTheme = Prettify<ComponentHtmlPreviewLoader>;
+//#endregion
+export { HtmlPreviewLoaderTheme };

package/dist/components/HtmlPreviewLoader/styles.js

@@ -0,0 +1,87 @@
+import { componentHtmlPreviewLoader } from "../../styleD/build/typescript/component/htmlPreviewLoader.js";
+import { css, keyframes } from "@emotion/react";
+//#region src/components/HtmlPreviewLoader/styles.ts
+const defaultHtmlPreviewLoaderTheme = componentHtmlPreviewLoader;
+const htmlPreviewLoaderStyles = (theme) => {
+	return css`
+		background-color: ${theme.shared.color.background};
+		color: ${theme.shared.color.text};
+		padding-top: ${theme.paddingTop};
+		padding-bottom: ${theme.paddingBottom};
+		padding-left: ${theme.paddingLeft};
+		padding-right: ${theme.paddingRight};
+		position: relative;
+	`;
+};
+const headerStyles = () => {
+	return css`
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	`;
+};
+const previewFrameStyle = ({ previewFrame }) => {
+	return css`
+		border-color: ${previewFrame.borderColor};
+		border-style: ${previewFrame.borderStyle};
+		border-width: ${previewFrame.borderWidth};
+		background-color: ${previewFrame.backgroundColor};
+		padding-top: ${previewFrame.paddingTop};
+		padding-bottom: ${previewFrame.paddingBottom};
+		padding-left: ${previewFrame.paddingLeft};
+		padding-right: ${previewFrame.paddingRight};
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		position: relative;
+	`;
+};
+const iframeStyle = (isNotLoaded) => {
+	return css`
+		border: none;
+		transition: 'filter 0.25s';
+		${isNotLoaded ? `
+			filter: blur(3px);
+			pointer-events: none;	
+		` : ""}
+	`;
+};
+const reloadButtonStyle = ({ previewFrame }) => {
+	return css`
+		position: absolute;
+		bottom: ${previewFrame.paddingBottom};
+		right: ${previewFrame.paddingRight};
+	`;
+};
+const loadingIconStyle = ({ loadingIcon }) => {
+	return css`
+		font-size: ${loadingIcon.size};
+		color: ${loadingIcon.color};
+	`;
+};
+const spinAnimationStyle = () => {
+	return css`
+		animation: ${keyframes({
+		from: { transform: "rotate(0deg)" },
+		to: { transform: "rotate(360deg)" }
+	})} 1s linear infinite;
+	`;
+};
+const centeredStyle = () => {
+	return css`
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+	`;
+};
+const alertBannerContentsStyle = () => {
+	return css`
+		display: flex;
+		gap: 10;
+		align-items: center;
+	`;
+};
+//#endregion
+export { alertBannerContentsStyle, centeredStyle, defaultHtmlPreviewLoaderTheme, headerStyles, htmlPreviewLoaderStyles, iframeStyle, loadingIconStyle, previewFrameStyle, reloadButtonStyle, spinAnimationStyle };

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

@@ -0,0 +1,28 @@
+import { DefaultProps } from "../../util/types.cjs";
+import { HtmlPreviewLoaderTheme } from "./styles.cjs";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/HtmlPreviewLoader/types.d.ts
+type CommonProps = {
+  minHeight?: number;
+  title: ReactNode;
+  widthOptions?: number[];
+  defaultWidth?: number;
+  frameBackground?: CSSProperties['background'];
+  allowReloading?: boolean;
+};
+type HtmlPreviewLoaderProps = DefaultProps<HtmlPreviewLoaderTheme> & CommonProps & {
+  fetchHtml: {
+    (): Promise<string>;
+  };
+};
+type HtmlPreviewProps = DefaultProps<HtmlPreviewLoaderTheme> & CommonProps & {
+  html?: string;
+  isLoading?: boolean;
+  errorMessage?: string;
+  attemptLoad?: {
+    (): void;
+  };
+};
+//#endregion
+export { HtmlPreviewLoaderProps, HtmlPreviewProps };

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

@@ -0,0 +1,28 @@
+import { DefaultProps } from "../../util/types.js";
+import { HtmlPreviewLoaderTheme } from "./styles.js";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/HtmlPreviewLoader/types.d.ts
+type CommonProps = {
+  minHeight?: number;
+  title: ReactNode;
+  widthOptions?: number[];
+  defaultWidth?: number;
+  frameBackground?: CSSProperties['background'];
+  allowReloading?: boolean;
+};
+type HtmlPreviewLoaderProps = DefaultProps<HtmlPreviewLoaderTheme> & CommonProps & {
+  fetchHtml: {
+    (): Promise<string>;
+  };
+};
+type HtmlPreviewProps = DefaultProps<HtmlPreviewLoaderTheme> & CommonProps & {
+  html?: string;
+  isLoading?: boolean;
+  errorMessage?: string;
+  attemptLoad?: {
+    (): void;
+  };
+};
+//#endregion
+export { HtmlPreviewLoaderProps, HtmlPreviewProps };

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

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-html-preview-loader-padding-top: 0px;
+	--component-html-preview-loader-padding-right: 0.5rem;
+	--component-html-preview-loader-padding-bottom: 0px;
+	--component-html-preview-loader-padding-left: 0.5rem;
+	--component-html-preview-loader-shared-color-background: #ffffff;
+	--component-html-preview-loader-shared-color-text: #000000;
+	--component-html-preview-loader-preview-frame-background-color: #ededed;
+	--component-html-preview-loader-preview-frame-border-width: 0.0625rem;
+	--component-html-preview-loader-preview-frame-border-style: solid;
+	--component-html-preview-loader-preview-frame-border-color: #545454;
+	--component-html-preview-loader-preview-frame-padding-top: 0.5rem;
+	--component-html-preview-loader-preview-frame-padding-right: 0.5rem;
+	--component-html-preview-loader-preview-frame-padding-bottom: 0.5rem;
+	--component-html-preview-loader-preview-frame-padding-left: 0.5rem;
+	--component-html-preview-loader-loading-icon-color: #8d8d8d;
+	--component-html-preview-loader-loading-icon-size: 3rem;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-preview-frame-background-color: #545454;
+	--component-preview-frame-border-width: 0.0625rem;
+	--component-preview-frame-border-style: solid;
+	--component-preview-frame-border-color: #545454;
+}

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

@@ -10,7 +10,7 @@
 	--component-text-area-shared-padding-bottom: 0.5rem;
 	--component-text-area-shared-padding-left: 0.75rem;
 	--component-text-area-shared-height: 144px;
-	--component-text-area-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-text-area-shared-margin-top: 0.25rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 8px, then margin-top should be 4px */
 	--component-text-area-shared-border-radius: 0.25rem;
 	--component-text-area-shared-border: 0.0625rem solid #545454;
 	--component-text-area-shared-background-color: #ffffff;

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

@@ -9,7 +9,7 @@
 	--component-text-input-shared-padding-right: 0.75rem;
 	--component-text-input-shared-padding-bottom: 0;
 	--component-text-input-shared-padding-left: 0.75rem;
-	--component-text-input-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-text-input-shared-margin-top: 0.25rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 8px, then margin-top should be 4px */
 	--component-text-input-shared-border-radius: 0.25rem;
 	--component-text-input-shared-border: 0.0625rem solid #545454;
 	--component-text-input-shared-background-color: #ffffff;

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

@@ -14,6 +14,7 @@
 	--semantic-colors-text-success-inverse: #cde4c9;
 	--semantic-colors-text-information: #00344e;
 	--semantic-colors-text-disabled: #999999;
+	--semantic-colors-text-link: #00496c;
 	--semantic-colors-text-green: #24491d;
 	--semantic-colors-text-blue: #092f62;
 	--semantic-colors-text-red: #65170e;
@@ -78,6 +79,7 @@
 	--semantic-colors-fill-warning-weak: #fbeebf;
 	--semantic-colors-fill-information-weak: #e8f0fb;
 	--semantic-colors-fill-error-weak: #f5c6c0;
+	--semantic-colors-fill-error-weaker: #fbebe9;
 	--semantic-colors-fill-error-strong: #b42a19;
 	--semantic-colors-fill-success-weak: #cde4c9;
 	--semantic-colors-fill-success-strong: #326528;

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

@@ -0,0 +1,30 @@
+//#region src/styleD/build/typescript/component/htmlPreviewLoader.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentHtmlPreviewLoader = {
+	paddingTop: "0px",
+	paddingRight: "0.5rem",
+	paddingBottom: "0px",
+	paddingLeft: "0.5rem",
+	shared: { color: {
+		background: "#ffffff",
+		text: "#000000"
+	} },
+	previewFrame: {
+		backgroundColor: "#ededed",
+		borderWidth: "0.0625rem",
+		borderStyle: "solid",
+		borderColor: "#545454",
+		paddingTop: "0.5rem",
+		paddingRight: "0.5rem",
+		paddingBottom: "0.5rem",
+		paddingLeft: "0.5rem"
+	},
+	loadingIcon: {
+		color: "#8d8d8d",
+		size: "3rem"
+	}
+};
+//#endregion
+exports.componentHtmlPreviewLoader = componentHtmlPreviewLoader;

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

@@ -0,0 +1,33 @@
+//#region src/styleD/build/typescript/component/htmlPreviewLoader.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentHtmlPreviewLoader: {
+  paddingTop: string;
+  paddingRight: string;
+  paddingBottom: string;
+  paddingLeft: string;
+  shared: {
+    color: {
+      background: string;
+      text: string;
+    };
+  };
+  previewFrame: {
+    backgroundColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+  };
+  loadingIcon: {
+    color: string;
+    size: string;
+  };
+};
+type ComponentHtmlPreviewLoader = typeof componentHtmlPreviewLoader;
+//#endregion
+export { ComponentHtmlPreviewLoader, componentHtmlPreviewLoader };

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

@@ -0,0 +1,33 @@
+//#region src/styleD/build/typescript/component/htmlPreviewLoader.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentHtmlPreviewLoader: {
+  paddingTop: string;
+  paddingRight: string;
+  paddingBottom: string;
+  paddingLeft: string;
+  shared: {
+    color: {
+      background: string;
+      text: string;
+    };
+  };
+  previewFrame: {
+    backgroundColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+  };
+  loadingIcon: {
+    color: string;
+    size: string;
+  };
+};
+type ComponentHtmlPreviewLoader = typeof componentHtmlPreviewLoader;
+//#endregion
+export { ComponentHtmlPreviewLoader, componentHtmlPreviewLoader };

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

@@ -0,0 +1,30 @@
+//#region src/styleD/build/typescript/component/htmlPreviewLoader.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentHtmlPreviewLoader = {
+	paddingTop: "0px",
+	paddingRight: "0.5rem",
+	paddingBottom: "0px",
+	paddingLeft: "0.5rem",
+	shared: { color: {
+		background: "#ffffff",
+		text: "#000000"
+	} },
+	previewFrame: {
+		backgroundColor: "#ededed",
+		borderWidth: "0.0625rem",
+		borderStyle: "solid",
+		borderColor: "#545454",
+		paddingTop: "0.5rem",
+		paddingRight: "0.5rem",
+		paddingBottom: "0.5rem",
+		paddingLeft: "0.5rem"
+	},
+	loadingIcon: {
+		color: "#8d8d8d",
+		size: "3rem"
+	}
+};
+//#endregion
+export { componentHtmlPreviewLoader };

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

@@ -13,7 +13,7 @@ const componentTextArea = {
 			left: "0.75rem"
 		},
 		height: "144px",
-		marginTop: "0.5rem",
+		marginTop: "0.25rem",
 		borderRadius: "0.25rem",
 		border: "0.0625rem solid #545454",
 		backgroundColor: "#ffffff",

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

@@ -13,7 +13,7 @@ const componentTextArea = {
 			left: "0.75rem"
 		},
 		height: "144px",
-		marginTop: "0.5rem",
+		marginTop: "0.25rem",
 		borderRadius: "0.25rem",
 		border: "0.0625rem solid #545454",
 		backgroundColor: "#ffffff",

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

@@ -12,7 +12,7 @@ const componentTextInput = {
 			bottom: "0",
 			left: "0.75rem"
 		},
-		marginTop: "0.5rem",
+		marginTop: "0.25rem",
 		borderRadius: "0.25rem",
 		border: "0.0625rem solid #545454",
 		backgroundColor: "#ffffff",

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

@@ -12,7 +12,7 @@ const componentTextInput = {
 			bottom: "0",
 			left: "0.75rem"
 		},
-		marginTop: "0.5rem",
+		marginTop: "0.25rem",
 		borderRadius: "0.25rem",
 		border: "0.0625rem solid #545454",
 		backgroundColor: "#ffffff",

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

@@ -15,6 +15,7 @@ const semanticColors = {
 		successInverse: "#cde4c9",
 		information: "#00344e",
 		disabled: "#999999",
+		link: "#00496c",
 		green: "#24491d",
 		blue: "#092f62",
 		red: "#65170e",
@@ -85,6 +86,7 @@ const semanticColors = {
 		warningWeak: "#fbeebf",
 		informationWeak: "#e8f0fb",
 		errorWeak: "#f5c6c0",
+		errorWeaker: "#fbebe9",
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",

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

@@ -15,6 +15,7 @@ declare const semanticColors: {
     successInverse: string;
     information: string;
     disabled: string;
+    link: string;
     green: string;
     blue: string;
     red: string;
@@ -85,6 +86,7 @@ declare const semanticColors: {
     warningWeak: string;
     informationWeak: string;
     errorWeak: string;
+    errorWeaker: string;
     errorStrong: string;
     successWeak: string;
     successStrong: string;

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

@@ -15,6 +15,7 @@ declare const semanticColors: {
     successInverse: string;
     information: string;
     disabled: string;
+    link: string;
     green: string;
     blue: string;
     red: string;
@@ -85,6 +86,7 @@ declare const semanticColors: {
     warningWeak: string;
     informationWeak: string;
     errorWeak: string;
+    errorWeaker: string;
     errorStrong: string;
     successWeak: string;
     successStrong: string;

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

@@ -15,6 +15,7 @@ const semanticColors = {
 		successInverse: "#cde4c9",
 		information: "#00344e",
 		disabled: "#999999",
+		link: "#00496c",
 		green: "#24491d",
 		blue: "#092f62",
 		red: "#65170e",
@@ -85,6 +86,7 @@ const semanticColors = {
 		warningWeak: "#fbeebf",
 		informationWeak: "#e8f0fb",
 		errorWeak: "#f5c6c0",
+		errorWeaker: "#fbebe9",
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -327,6 +327,16 @@
         "default": "./dist/Tabs.cjs"
       }
     },
+    "./HtmlPreviewLoader": {
+      "import": {
+        "types": "./dist/HtmlPreviewLoader.d.ts",
+        "default": "./dist/HtmlPreviewLoader.js"
+      },
+      "require": {
+        "types": "./dist/HtmlPreviewLoader.d.cts",
+        "default": "./dist/HtmlPreviewLoader.cjs"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",