@guardian/stand 0.0.59 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.59",
+  "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",