@guardian/stand 0.0.59 → 0.0.61

package/dist/components/Byline/lib.js

@@ -168,4 +168,4 @@ const convertNodeToBylineModel = (doc) => {
 	return model;
 };
 //#endregion
-export { addTaggedContributor, addUntaggedContributor, convertBylineModelToNode, convertNodeToBylineModel, getCurrentText, hasHitContributorLimit };
+export { addTaggedContributor, addUntaggedContributor, convertBylineModelToNode, convertNodeToBylineModel, detectNameInText, getCurrentText, hasHitContributorLimit, insertChip };

package/dist/components/Byline/theme.d.cts

@@ -1,6 +1,5 @@
 import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentByline } from "../../styleD/build/typescript/component/byline.cjs";
-
 //#region src/components/Byline/theme.d.ts
 type PartialBylineTheme = Prettify<DeepPartial<ComponentByline>>;
 //#endregion

package/dist/components/Byline/theme.d.ts

@@ -1,6 +1,5 @@
 import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentByline } from "../../styleD/build/typescript/component/byline.js";
-
 //#region src/components/Byline/theme.d.ts
 type PartialBylineTheme = Prettify<DeepPartial<ComponentByline>>;
 //#endregion

package/dist/components/Checkbox/Checkbox.d.cts

@@ -1,13 +1,5 @@
 import { CheckboxProps } from "./types.cjs";
-
 //#region src/components/Checkbox/Checkbox.d.ts
-declare function Checkbox({
-  children,
-  size,
-  isIndeterminate,
-  theme,
-  cssOverrides,
-  ...props
-}: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Checkbox({ children, size, isIndeterminate, theme, cssOverrides, ...props }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,13 +1,5 @@
 import { CheckboxProps } from "./types.js";
-
 //#region src/components/Checkbox/Checkbox.d.ts
-declare function Checkbox({
-  children,
-  size,
-  isIndeterminate,
-  theme,
-  cssOverrides,
-  ...props
-}: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Checkbox({ children, size, isIndeterminate, theme, cssOverrides, ...props }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Checkbox };

package/dist/components/Checkbox/CheckboxGroup.cjs

@@ -4,7 +4,7 @@ const require_styles = require("./styles.cjs");
 const require_Checkbox = require("./Checkbox.cjs");
 const require_Form = require("../Form/Form.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/Checkbox/CheckboxGroup.tsx

package/dist/components/Checkbox/CheckboxGroup.d.cts

@@ -1,10 +1,5 @@
 import { CheckboxGroupProps } from "./types.cjs";
-
 //#region src/components/Checkbox/CheckboxGroup.d.ts
-declare function CheckboxGroup({
-  size,
-  theme,
-  ...props
-}: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CheckboxGroup({ size, theme, ...props }: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { CheckboxGroup };

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -1,10 +1,5 @@
 import { CheckboxGroupProps } from "./types.js";
-
 //#region src/components/Checkbox/CheckboxGroup.d.ts
-declare function CheckboxGroup({
-  size,
-  theme,
-  ...props
-}: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CheckboxGroup({ size, theme, ...props }: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { CheckboxGroup };

package/dist/components/Checkbox/styles.cjs

@@ -93,8 +93,8 @@ const checkboxGroupStyles = (theme, { size }, hasError) => {
 		gap: ${theme.group[size].gap};
 		margin-top: ${theme.group[size].marginTop};
 		${hasError && _emotion_react.css`
-			margin-bottom: ${theme.group[size].marginBottom};
-		`}
+				margin-bottom: ${theme.group[size].marginBottom};
+			`}
 	`;
 };
 //#endregion

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

@@ -1,7 +1,7 @@
 import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentCheckbox } from "../../styleD/build/typescript/component/checkbox.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Checkbox/styles.d.ts
 type CheckboxTheme = Prettify<ComponentCheckbox>;
 type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;

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

@@ -1,7 +1,7 @@
 import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentCheckbox } from "../../styleD/build/typescript/component/checkbox.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Checkbox/styles.d.ts
 type CheckboxTheme = Prettify<ComponentCheckbox>;
 type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;

package/dist/components/Checkbox/styles.js

@@ -93,8 +93,8 @@ const checkboxGroupStyles = (theme, { size }, hasError) => {
 		gap: ${theme.group[size].gap};
 		margin-top: ${theme.group[size].marginTop};
 		${hasError && css`
-			margin-bottom: ${theme.group[size].marginBottom};
-		`}
+				margin-bottom: ${theme.group[size].marginBottom};
+			`}
 	`;
 };
 //#endregion

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

@@ -2,7 +2,6 @@ import { DefaultPropsWithChildren } from "../../util/types.cjs";
 import { FormInputContainerDefaultProps } from "../Form/types.cjs";
 import { CheckboxTheme } from "./styles.cjs";
 import { CheckboxGroupProps, CheckboxProps } from "react-aria-components";
-
 //#region src/components/Checkbox/types.d.ts
 interface CheckboxProps$1 extends DefaultPropsWithChildren<CheckboxTheme, CheckboxProps['className']>, Omit<CheckboxProps, 'children'> {
   /**

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

@@ -2,7 +2,6 @@ import { DefaultPropsWithChildren } from "../../util/types.js";
 import { FormInputContainerDefaultProps } from "../Form/types.js";
 import { CheckboxTheme } from "./styles.js";
 import { CheckboxGroupProps, CheckboxProps } from "react-aria-components";
-
 //#region src/components/Checkbox/types.d.ts
 interface CheckboxProps$1 extends DefaultPropsWithChildren<CheckboxTheme, CheckboxProps['className']>, Omit<CheckboxProps, 'children'> {
   /**

package/dist/components/DatePicker/DatePicker.d.cts

@@ -1,12 +1,5 @@
 import { DatePickerProps } from "./types.cjs";
-
 //#region src/components/DatePicker/DatePicker.d.ts
-declare function DatePicker({
-  isInvalid,
-  locale,
-  useMonthTextInput,
-  theme,
-  ...props
-}: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DatePicker({ isInvalid, locale, useMonthTextInput, theme, ...props }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { DatePicker };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,12 +1,5 @@
 import { DatePickerProps } from "./types.js";
-
 //#region src/components/DatePicker/DatePicker.d.ts
-declare function DatePicker({
-  isInvalid,
-  locale,
-  useMonthTextInput,
-  theme,
-  ...props
-}: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DatePicker({ isInvalid, locale, useMonthTextInput, theme, ...props }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { DatePicker };

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

@@ -1,7 +1,6 @@
 import { Prettify } from "../../util/types.cjs";
 import { ComponentDatePicker } from "../../styleD/build/typescript/component/datePicker.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/DatePicker/styles.d.ts
 type DatePickerTheme = Prettify<ComponentDatePicker>;
 //#endregion

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

@@ -1,7 +1,6 @@
 import { Prettify } from "../../util/types.js";
 import { ComponentDatePicker } from "../../styleD/build/typescript/component/datePicker.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/DatePicker/styles.d.ts
 type DatePickerTheme = Prettify<ComponentDatePicker>;
 //#endregion

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

@@ -1,7 +1,7 @@
+import "../../util/types.cjs";
 import { FormInputContainerDefaultProps } from "../Form/types.cjs";
 import { DatePickerTheme } from "./styles.cjs";
 import { DatePickerProps, DateValue } from "react-aria-components";
-
 //#region src/components/DatePicker/types.d.ts
 interface DatePickerProps$1 extends FormInputContainerDefaultProps<Omit<DatePickerProps<DateValue>, 'granularity' | 'hideTimeZone'>, DatePickerTheme> {
   /**

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

@@ -1,7 +1,7 @@
+import "../../util/types.js";
 import { FormInputContainerDefaultProps } from "../Form/types.js";
 import { DatePickerTheme } from "./styles.js";
 import { DatePickerProps, DateValue } from "react-aria-components";
-
 //#region src/components/DatePicker/types.d.ts
 interface DatePickerProps$1 extends FormInputContainerDefaultProps<Omit<DatePickerProps<DateValue>, 'granularity' | 'hideTimeZone'>, DatePickerTheme> {
   /**

package/dist/components/Favicon/Favicon.d.cts

@@ -1,5 +1,4 @@
 import { FaviconProps } from "./types.cjs";
-
 //#region src/components/Favicon/Favicon.d.ts
 declare const Favicon: (props: FaviconProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 //#endregion

package/dist/components/Favicon/Favicon.d.ts

@@ -1,5 +1,4 @@
 import { FaviconProps } from "./types.js";
-
 //#region src/components/Favicon/Favicon.d.ts
 declare const Favicon: (props: FaviconProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 //#endregion

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

@@ -1,7 +1,6 @@
 import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentFavicon } from "../../styleD/build/typescript/component/favicon.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Favicon/styles.d.ts
 type FaviconTheme = Prettify<ComponentFavicon>;
 type PartialFaviconTheme = Prettify<DeepPartial<FaviconTheme>>;

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

@@ -1,7 +1,6 @@
 import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentFavicon } from "../../styleD/build/typescript/component/favicon.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Favicon/styles.d.ts
 type FaviconTheme = Prettify<ComponentFavicon>;
 type PartialFaviconTheme = Prettify<DeepPartial<FaviconTheme>>;

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

@@ -1,7 +1,6 @@
 import { DefaultProps } from "../../util/types.cjs";
 import { IconProps } from "../Icon/types.cjs";
 import { FaviconTheme } from "./styles.cjs";
-
 //#region src/components/Favicon/types.d.ts
 interface FaviconWithLetter extends DefaultProps<FaviconTheme> {
   /**

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

@@ -1,7 +1,6 @@
 import { DefaultProps } from "../../util/types.js";
 import { IconProps } from "../Icon/types.js";
 import { FaviconTheme } from "./styles.js";
-
 //#region src/components/Favicon/types.d.ts
 interface FaviconWithLetter extends DefaultProps<FaviconTheme> {
   /**

package/dist/components/Form/styles.cjs

@@ -10,8 +10,8 @@ const formInputContainerStyles = (theme, { fluid }) => {
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
 		${!fluid && _emotion_react.css`
-			max-width: ${theme.shared.container.maxWidth};
-		`}
+				max-width: ${theme.shared.container.maxWidth};
+			`}
 	`;
 };
 const formInputLabelStyles = (theme, { isDisabled, size }) => {
@@ -20,8 +20,8 @@ const formInputLabelStyles = (theme, { isDisabled, size }) => {
 		${require_typography.convertTypographyToEmotionStringStyle(theme[size].label.typography)}
 
 		${isDisabled && _emotion_react.css`
-			color: ${theme.shared.label.disabled.color};
-		`}
+				color: ${theme.shared.label.disabled.color};
+			`}
 	`;
 };
 const formInputDescriptionStyles = (theme, { isDisabled }) => {
@@ -29,8 +29,8 @@ const formInputDescriptionStyles = (theme, { isDisabled }) => {
 		color: ${theme.shared.description.color};
 		${require_typography.convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
 		${isDisabled && _emotion_react.css`
-			color: ${theme.shared.description.disabled.color};
-		`}
+				color: ${theme.shared.description.disabled.color};
+			`}
 	`;
 };
 //#endregion

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

@@ -1,7 +1,7 @@
 import { Prettify } from "../../util/types.cjs";
 import { ComponentForm } from "../../styleD/build/typescript/component/form.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Form/styles.d.ts
 type FormInputContainerTheme = Prettify<ComponentForm['input']>;
 //#endregion

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

@@ -1,7 +1,7 @@
 import { Prettify } from "../../util/types.js";
 import { ComponentForm } from "../../styleD/build/typescript/component/form.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Form/styles.d.ts
 type FormInputContainerTheme = Prettify<ComponentForm['input']>;
 //#endregion

package/dist/components/Form/styles.js

@@ -10,8 +10,8 @@ const formInputContainerStyles = (theme, { fluid }) => {
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
 		${!fluid && css`
-			max-width: ${theme.shared.container.maxWidth};
-		`}
+				max-width: ${theme.shared.container.maxWidth};
+			`}
 	`;
 };
 const formInputLabelStyles = (theme, { isDisabled, size }) => {
@@ -20,8 +20,8 @@ const formInputLabelStyles = (theme, { isDisabled, size }) => {
 		${convertTypographyToEmotionStringStyle(theme[size].label.typography)}
 
 		${isDisabled && css`
-			color: ${theme.shared.label.disabled.color};
-		`}
+				color: ${theme.shared.label.disabled.color};
+			`}
 	`;
 };
 const formInputDescriptionStyles = (theme, { isDisabled }) => {
@@ -29,8 +29,8 @@ const formInputDescriptionStyles = (theme, { isDisabled }) => {
 		color: ${theme.shared.description.color};
 		${convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
 		${isDisabled && css`
-			color: ${theme.shared.description.disabled.color};
-		`}
+				color: ${theme.shared.description.disabled.color};
+			`}
 	`;
 };
 //#endregion

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

@@ -1,7 +1,6 @@
 import { DeepPartial, DefaultProps } from "../../util/types.cjs";
 import { FormInputContainerTheme } from "./styles.cjs";
 import { ReactNode } from "react";
-
 //#region src/components/Form/types.d.ts
 type FormInputContainerDefaultProps<ReactAriaInput extends {
   className?: unknown;

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

@@ -1,7 +1,6 @@
 import { DeepPartial, DefaultProps } from "../../util/types.js";
 import { FormInputContainerTheme } from "./styles.js";
 import { ReactNode } from "react";
-
 //#region src/components/Form/types.d.ts
 type FormInputContainerDefaultProps<ReactAriaInput extends {
   className?: unknown;

package/dist/components/Grid/Grid.d.cts

@@ -1,20 +1,6 @@
 import { GridProps, ItemProps } from "./types.cjs";
-
 //#region src/components/Grid/Grid.d.ts
-declare function Grid({
-  children,
-  theme,
-  cssOverrides,
-  as: Component,
-  ...props
-}: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Item({
-  children,
-  theme,
-  cssOverrides,
-  size,
-  offset,
-  ...props
-}: ItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Grid({ children, theme, cssOverrides, as: Component, ...props }: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Item({ children, theme, cssOverrides, size, offset, ...props }: ItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Grid, Item };

package/dist/components/Grid/Grid.d.ts

@@ -1,20 +1,6 @@
 import { GridProps, ItemProps } from "./types.js";
-
 //#region src/components/Grid/Grid.d.ts
-declare function Grid({
-  children,
-  theme,
-  cssOverrides,
-  as: Component,
-  ...props
-}: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Item({
-  children,
-  theme,
-  cssOverrides,
-  size,
-  offset,
-  ...props
-}: ItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Grid({ children, theme, cssOverrides, as: Component, ...props }: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Item({ children, theme, cssOverrides, size, offset, ...props }: ItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Grid, Item };

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

@@ -1,7 +1,7 @@
 import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentGrid } from "../../styleD/build/typescript/component/grid.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Grid/styles.d.ts
 type GridTheme = Prettify<ComponentGrid>;
 type PartialGridTheme = Prettify<DeepPartial<GridTheme>>;

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

@@ -1,7 +1,7 @@
 import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentGrid } from "../../styleD/build/typescript/component/grid.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/Grid/styles.d.ts
 type GridTheme = Prettify<ComponentGrid>;
 type PartialGridTheme = Prettify<DeepPartial<GridTheme>>;

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

@@ -2,7 +2,6 @@ import { DefaultPropsWithChildren } from "../../util/types.cjs";
 import { Breakpoint } from "../../styleD/utils/semantic/mq.cjs";
 import { GridTheme } from "./styles.cjs";
 import { ElementType, HTMLAttributes } from "react";
-
 //#region src/components/Grid/types.d.ts
 type ResponsiveGridValue<T> = Partial<Record<Breakpoint, T>>;
 type GridSizeValue = number | 'auto' | 'grow';
@@ -26,4 +25,4 @@ interface ItemProps extends DefaultPropsWithChildren<GridTheme>, Omit<HTMLAttrib
   offset?: GridOffsetValue | ResponsiveGridValue<GridOffsetValue>;
 }
 //#endregion
-export { GridProps, ItemProps };
+export { GridOffsetValue, GridProps, GridSizeValue, ItemProps, ResponsiveGridValue };

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

@@ -2,7 +2,6 @@ import { DefaultPropsWithChildren } from "../../util/types.js";
 import { Breakpoint } from "../../styleD/utils/semantic/mq.js";
 import { GridTheme } from "./styles.js";
 import { ElementType, HTMLAttributes } from "react";
-
 //#region src/components/Grid/types.d.ts
 type ResponsiveGridValue<T> = Partial<Record<Breakpoint, T>>;
 type GridSizeValue = number | 'auto' | 'grow';
@@ -26,4 +25,4 @@ interface ItemProps extends DefaultPropsWithChildren<GridTheme>, Omit<HTMLAttrib
   offset?: GridOffsetValue | ResponsiveGridValue<GridOffsetValue>;
 }
 //#endregion
-export { GridProps, ItemProps };
+export { GridOffsetValue, GridProps, GridSizeValue, ItemProps, ResponsiveGridValue };

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,5 @@
+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,5 @@
+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 };