@hmlr/govuk-react-components-library 1.0.2 → 1.1.0

package/dist/index.esm.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.7 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.8 (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -545,6 +545,10 @@ legend + * {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
+[type=search]::-webkit-search-cancel-button {
+  cursor: pointer;
+  filter: grayscale(1);
+}
 
 /* rtl:raw:
 [type="tel"],
@@ -6140,6 +6144,7 @@ textarea.form-control-lg {
 .spinner-grow,
 .spinner-border {
   display: inline-block;
+  flex-shrink: 0;
   width: var(--bs-spinner-width);
   height: var(--bs-spinner-height);
   vertical-align: var(--bs-spinner-vertical-align);
@@ -11859,8 +11864,8 @@ textarea.form-control-lg {
 }
 
 .card-link :hover {
-  border-color: #fd0;
   color: #003078;
+  border-color: #fd0;
 }
 
 .card-header {
@@ -11868,13 +11873,13 @@ textarea.form-control-lg {
   color: #005ea5;
 }
 .card-header:hover {
-  background-color: #005ea5;
   color: #f8f8f8;
+  background-color: #005ea5;
   transition-duration: 0.3s;
 }
 .card-header:active {
-  border-bottom: #000 groove;
   background-color: gold;
+  border-bottom: #000 groove;
   transition: ease-in-out;
 }
 
@@ -11945,24 +11950,24 @@ textarea.form-control-lg {
 .loading-wheel-2 {
   width: 1em;
   height: 1em;
-  border-radius: 50%;
   margin: 40px;
-  animation: loading-frames 1.1s infinite ease;
   font-size: 8px;
   text-indent: -9999em;
+  border-radius: 50%;
   transform: translateZ(0);
+  animation: loading-frames 1.1s infinite ease;
 }
 
 .loading-wheel {
   width: 1em;
   height: 1em;
-  border-radius: 50%;
   margin: 40px;
   margin-left: 25px;
-  animation: loading-frames 1.1s infinite ease;
   font-size: 8px;
   text-indent: -9999em;
+  border-radius: 50%;
   transform: translateZ(0);
+  animation: loading-frames 1.1s infinite ease;
 }
 
 .head-space {

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, createAll, Button as Button$1, Checkboxes as Checkboxes$1, ErrorSummary as ErrorSummary$1, Header as Header$1, Radios as Radios$1, SkipLink as SkipLink$1, Tabs as Tabs$1 } from 'govuk-frontend';
+import { Accordion as Accordion$1, createAll, Button as Button$1, Checkboxes as Checkboxes$1, ErrorSummary as ErrorSummary$1, ExitThisPage as ExitThisPage$1, Header as Header$1, PasswordInput as PasswordInput$1, Radios as Radios$1, SkipLink as SkipLink$1, Tabs as Tabs$1 } from 'govuk-frontend';
 import { Link, useLocation } from 'react-router-dom';
 import * as React from 'react';
-import React__default, { useContext, useMemo, createElement, Component, useState, useEffect } from 'react';
+import React__default, { useContext, useMemo, createElement, Component, useState, useRef, useEffect } from 'react';
 
 function ConfigureOverallAccordion($scope, config) {
     if (JSON.stringify(config) === JSON.stringify({})) {
@@ -72,10 +72,10 @@ function ExtractAccordionConfigFromAttributes(remainingAttributes) {
     return accordionConfig;
 }
 
-const Accordion = ({ headingLevel: HeadingLevel = "h2", items, className, id, ...attributes }) => {
+const Accordion = ({ headingLevel: HeadingLevel = "h2", items = [], className, id, ...attributes }) => {
     const remainingAttributes = { ...attributes };
     ExtractAccordionConfigFromAttributes(remainingAttributes);
-    return (jsx("div", { ...remainingAttributes, id: id, className: `govuk-accordion ${className || ""}`, "data-module": "govuk-accordion", children: items.filter(Boolean).map((item, index) => (jsxs("div", { className: `govuk-accordion__section ${item.expanded ? "govuk-accordion__section--expanded" : ""}`, children: [jsxs("div", { className: "govuk-accordion__section-header", children: [jsx(HeadingLevel, { className: "govuk-accordion__section-heading", children: jsx("span", { className: "govuk-accordion__section-button", id: `${id}-heading-${index + 1}`, children: item.heading.children }) }), item.summary && (jsx("div", { className: "govuk-accordion__section-summary govuk-body", id: `${id}-summary-${index + 1}`, children: item.summary.children }))] }), jsx("div", { id: `${id}-content-${index + 1}`, className: "govuk-accordion__section-content", "aria-labelledby": `${id}-heading-${index + 1}`, children: item.content.children })] }, item.reactListKey || index))) }));
+    return (jsx("div", { ...remainingAttributes, id: id, className: `govuk-accordion ${className || ""}`, "data-module": "govuk-accordion", children: items.filter(Boolean).map((item, index) => (jsxs("div", { className: `govuk-accordion__section ${item.expanded ? "govuk-accordion__section--expanded" : ""}`, children: [jsxs("div", { className: "govuk-accordion__section-header", children: [jsx(HeadingLevel, { className: "govuk-accordion__section-heading", children: jsx("span", { className: "govuk-accordion__section-button", id: `${id}-heading-${index + 1}`, children: item.heading?.children }) }), item.summary && (jsx("div", { className: "govuk-accordion__section-summary govuk-body", id: `${id}-summary-${index + 1}`, children: item.summary.children }))] }), jsx("div", { id: `${id}-content-${index + 1}`, className: "govuk-accordion__section-content", "aria-labelledby": `${id}-heading-${index + 1}`, children: item.content?.children })] }, item.reactListKey || index))) }));
 };
 
 const LinkWithRef = ({ children, to, href, forwardedRef = null, ...attributes }) => {
@@ -540,7 +540,7 @@ const CardTitle = /*#__PURE__*/React.forwardRef(({
 });
 CardTitle.displayName = 'CardTitle';
 
-const Card = /*#__PURE__*/React.forwardRef(({
+const Card$1 = /*#__PURE__*/React.forwardRef(({
   bsPrefix,
   className,
   bg,
@@ -562,8 +562,8 @@ const Card = /*#__PURE__*/React.forwardRef(({
     }) : children
   });
 });
-Card.displayName = 'Card';
-var Card$1 = Object.assign(Card, {
+Card$1.displayName = 'Card';
+var Card = Object.assign(Card$1, {
   Img: CardImg,
   Title: CardTitle,
   Subtitle: CardSubtitle,
@@ -577,7 +577,7 @@ var Card$1 = Object.assign(Card, {
 
 const CardColumn = (props) => {
     const { body, header, link } = props;
-    return (jsx("div", { className: "col", children: jsxs(Card$1, { className: "card-styles", children: [jsx(Link, { to: link, children: jsx(Card$1.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsx(Card$1.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
+    return (jsx("div", { className: "col", children: jsxs(Card, { className: "card-styles", children: [jsx(Link, { to: link, children: jsx(Card.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsx(Card.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
 };
 
 const CardLayout = (props) => {
@@ -811,6 +811,24 @@ function ConfigureOverallErrorSummary($scope, config) {
     createAll(ErrorSummary$1, config, $scope);
 }
 
+const ExitThisPage = ({ children = "Exit this page", className, redirectUrl = "https://www.bbc.co.uk/weather", activatedText, timedOutText, pressTwoMoreTimesText, pressOneMoreTimeText, ...attributes }) => {
+    const i18nProps = {};
+    if (activatedText)
+        i18nProps["data-i18n.activated"] = activatedText;
+    if (timedOutText)
+        i18nProps["data-i18n.timed-out"] = timedOutText;
+    if (pressTwoMoreTimesText)
+        i18nProps["data-i18n.press-two-more-times"] = pressTwoMoreTimesText;
+    if (pressOneMoreTimeText)
+        i18nProps["data-i18n.press-one-more-time"] = pressOneMoreTimeText;
+    return (jsx("div", { ...attributes, ...i18nProps, className: `govuk-exit-this-page${className ? ` ${className}` : ""}`, "data-module": "govuk-exit-this-page", children: jsxs("a", { href: redirectUrl, role: "button", draggable: false, className: "govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button", "data-module": "govuk-button", rel: "nofollow noreferrer", children: [jsx("span", { className: "govuk-visually-hidden", children: "Emergency" }), " ", children] }) }));
+};
+ExitThisPage.displayName = "ExitThisPage";
+
+function ConfigureOverallExitThisPage($scope) {
+    createAll(ExitThisPage$1, {}, $scope);
+}
+
 const FileUpload = (props) => {
     const { className, errorMessage, formGroup, hint, label, "aria-describedby": describedBy, id, ...attributes } = props;
     let hintComponent;
@@ -935,6 +953,17 @@ const NotificationBanner = (props) => {
     return (jsxs("div", { className: `govuk-notification-banner ${typeClass} ${className || ""}`, role: roleAttribute, "aria-labelledby": titleId, "data-module": "govuk-notification-banner", ...(disableAutoFocus ? { "data-disable-auto-focus": "true" } : {}), ...attributes, children: [jsx("div", { className: "govuk-notification-banner__header", children: jsx(HeadingLevel, { className: "govuk-notification-banner__title", id: titleId, children: title }) }), jsx("div", { className: "govuk-notification-banner__content", children: typeof children === "string" ? (jsx("p", { className: "govuk-notification-banner__heading", children: children })) : (children) })] }));
 };
 
+const SvgIcon = ({ type, ...props }) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 15, height: 13, "aria-hidden": "true", ...props, children: jsx("path", { d: type === "next"
+            ? "M8.107-.008L6.693 1.406 10.986 5.7H-2v2h12.896L6.71 11.676l1.378 1.449 6.744-6.406L8.107-.008z"
+            : "M6.594-.008-.133 6.72l6.744 6.406 1.377-1.449-4.185-3.977h12.896v-2H3.715l4.293-4.293L6.594-.008z" }) }));
+
+const NavigationButton = ({ href, type, children, labelText, }) => {
+    const defaultText = type === "next" ? "Next" : "Previous";
+    const typeClass = type === "next" ? "next" : "prev";
+    const icon = (jsx(SvgIcon, { type: type, className: `govuk-pagination__icon govuk-pagination__icon--${typeClass}`, focusable: "false", "aria-hidden": "true" }));
+    return (jsxs("a", { className: "govuk-link govuk-pagination__link", href: href, rel: type, children: [type === "previous" && icon, jsxs("span", { className: "govuk-pagination__link-title", children: [children ?? defaultText, jsx("span", { className: "govuk-visually-hidden", children: " page" })] }), type === "next" && icon, labelText && (jsxs(Fragment, { children: [jsx("span", { className: "govuk-visually-hidden", children: ":" }), jsx("span", { className: "govuk-pagination__link-label", children: labelText })] }))] }));
+};
+
 const DOTS = "...";
 const UsePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, }) => {
     const range = (start, end) => {
@@ -970,29 +999,13 @@ const UsePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, })
     return paginationRange;
 };
 
-const SvgIcon = ({ type, ...props }) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 15, height: 13, "aria-hidden": "true", ...props, children: jsx("path", { d: type === "next"
-            ? "M8.107-.008L6.693 1.406 10.986 5.7H-2v2h12.896L6.71 11.676l1.378 1.449 6.744-6.406L8.107-.008z"
-            : "M6.594-.008-.133 6.72l6.744 6.406 1.377-1.449-4.185-3.977h12.896v-2H3.715l4.293-4.293L6.594-.008z" }) }));
-
-const NavigationButton = ({ isDisabled, onClick, children, name, type, }) => {
-    const typeClass = type === "next" ? type : "prev";
-    const Icon = (jsx(SvgIcon, { type: type, className: `govuk-pagination__icon govuk-pagination__icon--${typeClass}`, focusable: "false" }));
-    return isDisabled ? (jsxs("div", { rel: type, children: [type === "previous" && Icon, jsx("span", { className: "govuk-pagination__link-title", children: name }), type === "next" && Icon, children && (jsxs(Fragment, { children: [type === "previous" && jsx(Fragment, { children: "\u00A0" }), jsx("span", { className: "govuk-visually-hidden", children: ":" }), children, type === "next" && jsx(Fragment, { children: " \u00A0" })] }))] })) : (jsxs("a", { className: "govuk-link govuk-pagination__link", href: "#", rel: type, onClick: onClick, children: [type === "previous" && Icon, jsx("span", { className: "govuk-pagination__link-title", children: name }), type === "next" && Icon, children && (jsxs(Fragment, { children: [type === "previous" && jsx(Fragment, { children: "\u00A0\u00A0" }), jsx("span", { className: "govuk-visually-hidden", children: ":" }), children, type === "next" && jsx(Fragment, { children: "\u00A0\u00A0" })] }))] }));
-};
-
-const Pagination = ({ onPageChange, totalCount, siblingCount = 1, currentPage, pageSize, className, previousName = "Previous", nextName = "Next", previousChildren, nextChildren, }) => {
-    const paginationRange = UsePagination({
-        currentPage,
-        totalCount,
-        siblingCount,
-        pageSize,
-    });
-    if (!paginationRange || paginationRange.length < 2)
+const Pagination = ({ previous, next, items, className, }) => {
+    if (!previous && !next && (!items || items.length === 0))
         return null;
-    const onNext = () => onPageChange(currentPage + 1);
-    const onPrevious = () => onPageChange(currentPage - 1);
-    const lastPage = paginationRange[paginationRange.length - 1];
-    return (jsxs(Fragment, { children: [jsx("div", { className: "govuk-!-padding-bottom-2" }), jsx("div", { className: `govuk-grid-column-full ${className || ""}`, children: jsxs("nav", { className: "govuk-pagination", role: "navigation", "aria-label": "Pagination", children: [jsx("div", { className: "govuk-pagination__prev", children: jsx(NavigationButton, { isDisabled: currentPage === 1, onClick: onPrevious, name: previousName, type: "previous", children: previousChildren }) }), jsx("ul", { className: "govuk-pagination__list", children: paginationRange.map((pageNumber, index) => pageNumber === DOTS ? (jsx("li", { className: "govuk-pagination__item govuk-pagination__item--ellipses", children: DOTS }, index)) : (jsx("li", { className: `govuk-pagination__item ${pageNumber === currentPage ? "govuk-pagination__item--current" : ""}`, children: jsx("a", { className: "govuk-link govuk-pagination__link", href: "#", "aria-label": `Page ${pageNumber}`, "aria-current": pageNumber === currentPage ? "page" : undefined, onClick: () => onPageChange(pageNumber), children: pageNumber }) }, index))) }), jsx("div", { className: "govuk-pagination__next", children: jsx(NavigationButton, { isDisabled: currentPage === lastPage, onClick: onNext, name: nextName, type: "next", children: nextChildren }) })] }) }), jsx("div", { className: "govuk-!-padding-bottom-4" })] }));
+    // Block layout is used when there are no numbered page items — govuk renders
+    // the nav with an extra class and the link title with --decorated modifier.
+    const isBlockLayout = !items || items.length === 0;
+    return (jsxs("nav", { className: `govuk-pagination${isBlockLayout ? " govuk-pagination--block" : ""}${className ? ` ${className}` : ""}`, role: "navigation", "aria-label": "Pagination", children: [previous && (jsx("div", { className: "govuk-pagination__prev", children: jsx(NavigationButton, { type: "previous", ...previous }) })), items && items.length > 0 && (jsx("ul", { className: "govuk-pagination__list", children: items.map((item, index) => item.ellipsis ? (jsx("li", { className: "govuk-pagination__item govuk-pagination__item--ellipses", children: DOTS }, index)) : (jsx("li", { className: `govuk-pagination__item${item.current ? " govuk-pagination__item--current" : ""}`, children: jsx("a", { className: "govuk-link govuk-pagination__link", href: item.href ?? "#", "aria-label": `Page ${item.number}`, ...(item.current ? { "aria-current": "page" } : {}), children: item.number }) }, index))) })), next && (jsx("div", { className: "govuk-pagination__next", children: jsx(NavigationButton, { type: "next", ...next }) }))] }));
 };
 
 const Panel = (props) => {
@@ -1001,6 +1014,49 @@ const Panel = (props) => {
     return (jsxs("div", { className: `govuk-panel govuk-panel--confirmation ${className || ""}`, ...attributes, children: [jsx(HeadingLevel, { className: "govuk-panel__title", children: titleChildren }), innerHtml] }));
 };
 
+const PasswordInput = React__default.forwardRef((props, ref) => {
+    const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, autoComplete = "current-password", showPasswordText = "Show", hidePasswordText = "Hide", showPasswordAriaLabelText = "Show password", hidePasswordAriaLabelText = "Hide password", passwordShownAnnouncementText, passwordHiddenAnnouncementText, ...attributes } = props;
+    let describedByValue = describedBy || "";
+    let hintComponent = null;
+    let errorMessageComponent = null;
+    if (hint) {
+        const hintId = `${id}-hint`;
+        describedByValue += ` ${hintId}`;
+        hintComponent = jsx(Hint, { ...hint, id: hintId });
+    }
+    if (errorMessage) {
+        const errorId = id ? `${id}-error` : "";
+        describedByValue += ` ${errorId}`;
+        errorMessageComponent = jsx(ErrorMessage, { ...errorMessage, id: errorId });
+    }
+    // Build i18n data attributes for the govuk-frontend JS module
+    const i18nProps = {};
+    if (showPasswordText)
+        i18nProps["data-i18n.show-password"] = showPasswordText;
+    if (hidePasswordText)
+        i18nProps["data-i18n.hide-password"] = hidePasswordText;
+    if (showPasswordAriaLabelText)
+        i18nProps["data-i18n.show-password-aria-label"] =
+            showPasswordAriaLabelText;
+    if (hidePasswordAriaLabelText)
+        i18nProps["data-i18n.hide-password-aria-label"] =
+            hidePasswordAriaLabelText;
+    if (passwordShownAnnouncementText)
+        i18nProps["data-i18n.password-shown-announcement"] =
+            passwordShownAnnouncementText;
+    if (passwordHiddenAnnouncementText)
+        i18nProps["data-i18n.password-hidden-announcement"] =
+            passwordHiddenAnnouncementText;
+    // Label handles isPageHeading internally — no extra wrapper needed here
+    const labelEl = jsx(Label, { ...label, htmlFor: id });
+    return (jsxs("div", { className: `govuk-form-group${formGroup?.className ? ` ${formGroup.className}` : ""}${errorMessage ? " govuk-form-group--error" : ""} govuk-password-input`, "data-module": "govuk-password-input", ...i18nProps, children: [labelEl, hintComponent, errorMessageComponent, jsxs("div", { className: "govuk-input__wrapper govuk-password-input__wrapper", children: [jsx("input", { ref: ref, id: id, className: `govuk-input govuk-password-input__input govuk-js-password-input-input${className ? ` ${className}` : ""}${errorMessage ? " govuk-input--error" : ""}`, name: name || id, type: "password", spellCheck: false, autoComplete: autoComplete, autoCapitalize: "none", "aria-describedby": describedByValue.trim() || undefined, ...attributes }), jsx("button", { type: "button", className: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle", "data-module": "govuk-button", "aria-controls": id, "aria-label": showPasswordAriaLabelText, hidden: true, children: showPasswordText })] })] }));
+});
+PasswordInput.displayName = "PasswordInput";
+
+function ConfigureOverallPasswordInput($scope) {
+    createAll(PasswordInput$1, {}, $scope);
+}
+
 function Slugify(str) {
     str = str.replace(/^\s+|\s+$/g, ""); // trim leading/trailing white space
     str = str.toLowerCase(); // convert string to lowercase
@@ -1011,28 +1067,281 @@ function Slugify(str) {
     return str;
 }
 
+/**
+ * Convert a base64 string to an ArrayBuffer
+ */
+const _base64ToArrayBuffer = (base64) => {
+    const binaryString = window.atob(base64);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
+};
+/**
+ * Very small heuristic to detect a plain base64 string
+ */
+const isBase64 = (value) => /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})$/.test(value);
+/**
+ * ResolvePDFSource
+ *
+ * Accepts a source that may be:
+ *  - a plain base64 string (PDF binary encoded as base64)
+ *  - a data: URL containing base64 (data:application/pdf;base64,...)
+ *  - an existing blob: URL (blob:...)
+ *  - a Blob/File object
+ *  - a regular URL string (http(s) or same-origin path)
+ *
+ * Returns a SourceDeterminer:
+ *  - { isBase64Source: true, source: string } when an object URL was created
+ *  - { isBase64Source: false, source: string } when source can be used directly
+ *
+ * If an object URL is created, callers should revoke it when no longer needed:
+ *  `URL.revokeObjectURL(source)`
+ */
+const ResolvePDFSource = (source) => {
+    // Nothing provided
+    if (source === undefined || source === null || source === "") {
+        return { isBase64Source: false, source: "" };
+    }
+    // If source is already a Blob (File), create an object URL
+    if (typeof source.arrayBuffer === "function" ||
+        source instanceof Blob) {
+        const blob = source;
+        const objectUrl = URL.createObjectURL(blob);
+        return { isBase64Source: true, source: objectUrl };
+    }
+    // If source is a string:
+    if (typeof source === "string") {
+        // If it's already a blob URL, return as-is
+        if (source.startsWith("blob:")) {
+            return { isBase64Source: false, source };
+        }
+        // If it's a data URL (data:application/pdf;base64,....)
+        if (source.startsWith("data:")) {
+            // data:[<mediatype>][;base64],<data>
+            const commaIndex = source.indexOf(",");
+            if (commaIndex > -1) {
+                const meta = source.substring(0, commaIndex);
+                const dataPart = source.substring(commaIndex + 1);
+                // If it contains base64 marker, decode accordingly
+                if (meta.indexOf(";base64") !== -1) {
+                    try {
+                        const arrayBuffer = _base64ToArrayBuffer(dataPart);
+                        const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+                        const objectUrl = URL.createObjectURL(blob);
+                        return { isBase64Source: true, source: objectUrl };
+                    }
+                    catch (err) {
+                        console.error("ResolvePDFSource: failed to convert data: URL to blob", err);
+                        // fallback to returning original data URL
+                        return { isBase64Source: false, source };
+                    }
+                }
+                else {
+                    // Not base64-encoded data URL — return as is
+                    return { isBase64Source: false, source };
+                }
+            }
+        }
+        // If it's a plain base64 string (no data: prefix), convert
+        if (isBase64(source)) {
+            try {
+                const arrayBuffer = _base64ToArrayBuffer(source);
+                const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+                const objectUrl = URL.createObjectURL(blob);
+                return { isBase64Source: true, source: objectUrl };
+            }
+            catch (err) {
+                console.error("ResolvePDFSource: failed to convert base64 to blob", err);
+                return { isBase64Source: false, source };
+            }
+        }
+        // Otherwise treat as a normal URL (http(s) or same-origin path)
+        return { isBase64Source: false, source };
+    }
+    // Fallback: convert to string
+    try {
+        const asString = String(source);
+        return { isBase64Source: false, source: asString };
+    }
+    catch (err) {
+        console.error("ResolvePDFSource: failed to convert source to string", err);
+        return { isBase64Source: false, source: "" };
+    }
+};
+
 const PDFViewer = (props) => {
     const viewerRef = React__default.useRef(null);
-    const { iframeId, src, viewerLocation, documentName, documentNameColour, backend, toolbar = "minimal", additionalBackendAttributes, ...attributes } = props;
+    const { iframeId, src, viewerLocation, documentName, documentNameColour, backend, toolbar = "minimal", additionalBackendAttributes, 
+    // optional: lets callers skip client-side fetch for remote resources
+    disableClientFetch = false, ...attributes } = props;
     const [loading, setLoading] = useState(false);
+    // ref for object URL (either created by ResolvePDFSource or by us after fetching)
+    const objectUrlRef = useRef(null);
+    // did ResolvePDFSource create the object URL? (helps understanding where to revoke)
+    const createdByResolveRef = useRef(false);
+    // fetch abort controller for cross-origin remote fetches
+    const fetchControllerRef = useRef(null);
+    const isRemoteUrl = (url) => {
+        if (!url)
+            return false;
+        // Check if it's an HTTP(S) URL
+        return /^https?:\/\//i.test(url);
+    };
     useEffect(() => {
+        let mounted = true;
         setLoading(true);
         const element = viewerRef.current;
-        if (!element)
-            return; // Guard against null
-        const jsProps = {
-            iframeId,
-            source: src,
-            viewerLocation,
-            documentName,
-            documentNameColour,
-            element,
-            toolbar,
-            ...additionalBackendAttributes,
+        if (!element) {
+            setLoading(false);
+            return;
+        }
+        // cleanup previous URL/fetch if any
+        if (fetchControllerRef.current) {
+            try {
+                fetchControllerRef.current.abort();
+            }
+            catch (err) {
+                console.error("PDFViewer: fetch abort error:", err);
+                /* ignore */
+            }
+            fetchControllerRef.current = null;
+        }
+        if (objectUrlRef.current) {
+            try {
+                URL.revokeObjectURL(objectUrlRef.current);
+            }
+            catch (err) {
+                console.error("PDFViewer: revokeObjectURL error:", err);
+            }
+            objectUrlRef.current = null;
+            createdByResolveRef.current = false;
+        }
+        const init = async () => {
+            let sourceToUse = src;
+            // 1) Let ResolvePDFSource handle base64/data/blob inputs synchronously.
+            try {
+                const resolved = ResolvePDFSource(src);
+                if (resolved?.source) {
+                    sourceToUse = resolved.source;
+                    if (resolved.isBase64Source) {
+                        // ResolvePDFSource created an object URL for us (data/blob/base64)
+                        objectUrlRef.current = resolved.source;
+                        createdByResolveRef.current = true;
+                    }
+                }
+            }
+            catch (err) {
+                // If ResolvePDFSource throws, just ignore and fall back to src
+                console.error("PDFViewer: ResolvePDFSource error:", err);
+            }
+            // 2) If ResolvePDFSource didn't create an object URL and the src is cross-origin HTTP(S),
+            //    attempt a client-side fetch to create an object URL (so viewer can load it safely).
+            if (!objectUrlRef.current &&
+                !disableClientFetch &&
+                typeof src === "string" &&
+                /^https?:\/\//i.test(src) &&
+                isRemoteUrl(src)) {
+                const controller = new AbortController();
+                fetchControllerRef.current = controller;
+                try {
+                    const resp = await fetch(src, {
+                        signal: controller.signal,
+                        credentials: "omit",
+                    });
+                    if (resp.ok) {
+                        const blob = await resp.blob();
+                        if (blob && blob.size > 0) {
+                            const obj = URL.createObjectURL(blob);
+                            objectUrlRef.current = obj;
+                            createdByResolveRef.current = false; // we created it via fetch
+                            sourceToUse = obj;
+                        }
+                        else {
+                            console.warn("PDFViewer: fetched blob is empty - falling back to original src");
+                        }
+                    }
+                    else {
+                        console.warn(`PDFViewer: fetch returned ${resp.status} ${resp.statusText} for ${src}`);
+                        // fallback: keep using original src
+                    }
+                }
+                catch (err) {
+                    if (err instanceof Error && err.name === "AbortError") {
+                        // aborted, nothing to do
+                        if (!mounted)
+                            return;
+                    }
+                    else {
+                        console.error("PDFViewer: error fetching cross-origin PDF:", err);
+                    }
+                    // fallback to source as-is (original remote URL)
+                }
+            }
+            // 3) Prepare and call backend
+            if (!mounted)
+                return;
+            const jsProps = {
+                iframeId,
+                source: sourceToUse,
+                viewerLocation,
+                documentName,
+                documentNameColour,
+                element,
+                toolbar,
+                ...additionalBackendAttributes,
+            };
+            try {
+                backend(jsProps);
+            }
+            catch (err) {
+                console.error("PDFViewer: backend threw an error:", err);
+            }
+            finally {
+                if (mounted)
+                    setLoading(false);
+            }
+        }; // end init
+        init();
+        return () => {
+            mounted = false;
+            // cancel any ongoing fetch
+            if (fetchControllerRef.current) {
+                try {
+                    fetchControllerRef.current.abort();
+                }
+                catch (err) {
+                    console.error("PDFViewer: fetch abort error during cleanup:", err);
+                }
+                fetchControllerRef.current = null;
+            }
+            // revoke any object URL we created
+            if (objectUrlRef.current) {
+                try {
+                    URL.revokeObjectURL(objectUrlRef.current);
+                }
+                catch (err) {
+                    console.error("PDFViewer: fetch abort error during cleanup:", err);
+                }
+                objectUrlRef.current = null;
+                createdByResolveRef.current = false;
+            }
+            // Note: PDFViewerBackend also attaches an iframe to the element. If backend does not
+            // remove previous iframes, you might want to clear element.children here.
         };
-        backend(jsProps);
-        setLoading(false);
-    }, []);
+        // re-run when these inputs change
+    }, [
+        src,
+        iframeId,
+        viewerLocation,
+        documentName,
+        documentNameColour,
+        toolbar,
+        backend,
+        disableClientFetch,
+    ]);
     return (jsxs(Fragment, { children: [loading && jsx(Loading, { message: "Loading PDF Document" }), jsx("div", { ref: viewerRef, id: `viewer ${documentName ? Slugify(documentName) : ""}`, "data-testid": `viewer ${documentName ? Slugify(documentName) : ""}`, style: { width: "100%", height: "100%" }, ...attributes })] }));
 };
 
@@ -1046,27 +1355,6 @@ const ObjectToQueryString = (queryParameters) => {
         : "";
 };
 
-const _base64ToArrayBuffer = (base64) => {
-    const binaryString = window.atob(base64);
-    const len = binaryString.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-    }
-    return bytes.buffer;
-};
-const isBase64 = (value) => /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})$/.test(value);
-const ResolvePDFSource = (source) => {
-    const isBase64Source = isBase64(source);
-    if (!isBase64Source) {
-        return { isBase64Source, source };
-    }
-    const blob = new Blob([_base64ToArrayBuffer(source)], {
-        type: "application/pdf",
-    });
-    return { isBase64Source, source: URL.createObjectURL(blob) };
-};
-
 const PDFViewerBackend = ({ iframeId, source, viewerLocation = "/pdfjs-4.4.168-dist/web/viewer.html", documentName, documentNameColour = "black", toolbar = "minimal", element, ...remaining }) => {
     const sourceDeterminer = ResolvePDFSource(source);
     const iframe = document.createElement("iframe");
@@ -1083,6 +1371,8 @@ const PDFViewerBackend = ({ iframeId, source, viewerLocation = "/pdfjs-4.4.168-d
     iframe.src = `${viewerLocation}${queryString}`;
     iframe.style.width = "100%";
     iframe.style.height = "94%";
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-downloads");
+    iframe.setAttribute("allow", "cross-origin-isolated");
     if (sourceDeterminer.isBase64Source) {
         iframe.addEventListener("beforeunload", (event) => {
             event.preventDefault();
@@ -1292,5 +1582,5 @@ const WarningText = ({ children = "Warning message", className, ...attributes })
     return (jsxs("div", { className: `govuk-warning-text ${className || ""}`, ...attributes, children: [jsx("span", { className: "govuk-warning-text__icon", "aria-hidden": "true", children: "!" }), jsxs("strong", { className: "govuk-warning-text__text", children: [jsx("span", { className: "govuk-visually-hidden", children: "Warning" }), children] })] }));
 };
 
-export { Accordion, ActionLink, BackLink, Boolean$1 as Boolean, Breadcrumbs, Button, CardColumn, CardLayout, CharacterCount, Checkboxes as Checkbox, ConfigureOverallAccordion, ConfigureOverallButton, ConfigureOverallCheckboxes, ConfigureOverallErrorSummary, ConfigureOverallHeader, ConfigureOverallRadios, ConfigureOverallSkipLink, ConfigureOverallTabs, CookieBanner, DataNavigation, DateInput, Details, DifferenceNavigation, ErrorBoundary, ErrorMessage, ErrorSummary, ExtractAccordionConfigFromAttributes, Fieldset, FileUpload, Footer, Header, Hint, Input, InsetText, Label, Landing, LinkWithRef, Loading, Main, NotFoundPage, NotificationBanner, PDFViewer, PDFViewerBackend, Pagination, Panel, PhaseBanner, ProblemWithService, Radios, Select, ServiceNavigation, SkipLink, SummaryList, Table, Tabs, Tag, TaskList, Textarea, WarningInfo, WarningText };
+export { Accordion, ActionLink, BackLink, Boolean$1 as Boolean, Breadcrumbs, Button, CardColumn, CardLayout, CharacterCount, Checkboxes as Checkbox, ConfigureOverallAccordion, ConfigureOverallButton, ConfigureOverallCheckboxes, ConfigureOverallErrorSummary, ConfigureOverallExitThisPage, ConfigureOverallHeader, ConfigureOverallPasswordInput, ConfigureOverallRadios, ConfigureOverallSkipLink, ConfigureOverallTabs, CookieBanner, DOTS, DataNavigation, DateInput, Details, DifferenceNavigation, ErrorBoundary, ErrorMessage, ErrorSummary, ExitThisPage, ExtractAccordionConfigFromAttributes, Fieldset, FileUpload, Footer, Header, Hint, Input, InsetText, Label, Landing, LinkWithRef, Loading, Main, NotFoundPage, NotificationBanner, PDFViewer, PDFViewerBackend, Pagination, Panel, PasswordInput, PhaseBanner, ProblemWithService, Radios, Select, ServiceNavigation, SkipLink, SummaryList, Table, Tabs, Tag, TaskList, Textarea, UsePagination, WarningInfo, WarningText };
 //# sourceMappingURL=index.esm.js.map