@uktrade/react-component-library 0.22.7 → 0.22.10

package/Readme.md

@@ -59,8 +59,18 @@ This opens a Vite dev server with the playground for testing components.
 
 To publish a new version to NPM [@uktrade/react-component-library](https://www.npmjs.com/package/@uktrade/react-component-library):
 
-1. **Update the version** in `package.json` following semantic versioning (don’t forget to sync the lockfile as well).
+1. **Update the version** in `package.json` following semantic versioning (don’t forget to sync the lockfile as well (npm install)).
 2. **Commit your changes** on a feature or working branch.
 3. **Open a pull request** and **merge it into `main`**.
 4. **Create a new GitHub Release** from the `main` branch and tag it with the same version (for example, `v0.10.1`).
 5. Once the release is published, the [GitHub Actions workflow](./.github/workflows/release.yml) will automatically build and publish the package to NPM.
+
+### Testing 
+```bash
+npm run test
+```
+For more commands see package.json. 
+
+### FAQs
+- Locally testing without publish: simplest way is to build the react-component-library (npm run build) and then copy the dist and src folders from the react-component-library into your react apps node_modules folder, not the cleanest but works for now.
+

package/dist/components/ApiBoundary/ApiBoundary.d.ts

@@ -4,6 +4,6 @@ interface ApiBoundaryProps {
     error?: React.ReactNode | Error | null;
     children: React.ReactNode;
 }
-export declare function ApiBoundary({ isLoading, isError, error, children }: ApiBoundaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApiBoundary({ isLoading, isError, error, children }: ApiBoundaryProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ApiBoundary.d.ts.map

package/dist/components/ApiBoundary/ApiBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAe,EACf,KAAK,EACL,QAAQ,EACT,EAAE,gBAAgB,2CAalB"}
+{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAe,EACf,KAAK,EACL,QAAQ,EACT,EAAE,gBAAgB,+BAalB"}

package/dist/components/ApiQuery/ApiProvider.d.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 export declare function getQueryClient(): QueryClient;
 export declare function ApiProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export type ApiQueryState<T> = {
     data?: T;
     isLoading: boolean;

package/dist/components/ApiQuery/ApiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EAIX,KAAK,QAAQ,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,cAAc,gBAa7B;AAMD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMhE;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAYF,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;;;;EAgBjE;AAYD,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EACrD,UAAU,EAAE,CAAC,SAAS,EAAE,UAAU,KAAK,OAAO,CAAC,KAAK,CAAC;;;;;;;;;EAgBtD"}
+{"version":3,"file":"ApiProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EAIX,KAAK,QAAQ,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,cAAc,gBAa7B;AAMD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAMhE;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAYF,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;;;;EAgBjE;AAYD,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EACrD,UAAU,EAAE,CAAC,SAAS,EAAE,UAAU,KAAK,OAAO,CAAC,KAAK,CAAC;;;;;;;;;EAgBtD"}

package/dist/components/Arrow/Arrow.d.ts

@@ -4,5 +4,5 @@ export type ArrowProps = React.JSX.IntrinsicElements["div"] & {
     height?: number;
     active?: boolean;
 };
-export declare const Arrow: ({ className, variant, active, height, children, ...props }: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Arrow: ({ className, variant, active, height, children, ...props }: ArrowProps) => React.JSX.Element;
 //# sourceMappingURL=Arrow.d.ts.map

package/dist/components/Arrow/Arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/components/Arrow/Arrow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,4DAOnB,UAAU,4CAqBZ,CAAC"}
+{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/components/Arrow/Arrow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,4DAOnB,UAAU,sBAqBZ,CAAC"}

package/dist/components/Arrows/Arrows.d.ts

@@ -3,5 +3,5 @@ export type ArrowsProps = React.JSX.IntrinsicElements["div"] & {
     arrows: string[];
     activeIndex: number;
 };
-export declare const Arrows: ({ className, arrows, activeIndex }: ArrowsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Arrows: ({ className, arrows, activeIndex }: ArrowsProps) => React.JSX.Element;
 //# sourceMappingURL=Arrows.d.ts.map

package/dist/components/Arrows/Arrows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Arrows.d.ts","sourceRoot":"","sources":["../../../src/components/Arrows/Arrows.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,oCAAoC,WAAW,4CAarE,CAAC"}
+{"version":3,"file":"Arrows.d.ts","sourceRoot":"","sources":["../../../src/components/Arrows/Arrows.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,oCAAoC,WAAW,sBAarE,CAAC"}

package/dist/components/BackLink.d.ts

@@ -5,5 +5,5 @@ export interface BackLinkProps {
     onClick?: MouseEventHandler<HTMLAnchorElement>;
     className?: string;
 }
-export declare function BackLink({ text, href, onClick, className, }: BackLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackLink({ text, href, onClick, className, }: BackLinkProps): import("react").JSX.Element;
 //# sourceMappingURL=BackLink.d.ts.map

package/dist/components/BackLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BackLink.d.ts","sourceRoot":"","sources":["../../src/components/BackLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,IAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,aAAa,2CAUf"}
+{"version":3,"file":"BackLink.d.ts","sourceRoot":"","sources":["../../src/components/BackLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,IAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,aAAa,+BAUf"}

package/dist/components/Button.d.ts

@@ -3,6 +3,6 @@ type Props = JSX.IntrinsicElements["button"] & {
     children: ReactNode;
     variant?: "primary" | "secondary" | "warning";
 };
-export declare const Button: ({ variant, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, className, ...props }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,KAAK,GAAG,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GAAG;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAA8C,KAAK,4CAOzE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,KAAK,GAAG,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GAAG;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAA8C,KAAK,gBAOzE,CAAC"}

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts

@@ -22,6 +22,6 @@ interface CheckboxGroupProps {
     onChange?: (values: string[]) => void;
     values: string[];
 }
-export declare const CheckboxGroup: ({ legend, hint, error, options, name, values, legendAs, legendSize, checkboxSize, onChange, }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ legend, hint, error, options, name, values, legendAs, legendSize, checkboxSize, onChange, }: CheckboxGroupProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=CheckBoxGroupInput.d.ts.map

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,GAAI,+FAW3B,kBAAkB,4CAqFpB,CAAC"}
+{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,GAAI,+FAW3B,kBAAkB,gCAqFpB,CAAC"}

package/dist/components/Inputs/RadioInput/RadioInput.d.ts

@@ -18,6 +18,6 @@ interface RadioGroupProps extends Omit<JSX.IntrinsicElements["input"], "id" | "t
     className?: string;
     inline?: boolean;
 }
-export declare const RadioGroup: ({ id, name, label, hint, error, items, labelAs, labelSize, className, inline, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ id, name, label, hint, error, items, labelAs, labelSize, className, inline, ...props }: RadioGroupProps) => JSX.Element;
 export {};
 //# sourceMappingURL=RadioInput.d.ts.map

package/dist/components/Inputs/RadioInput/RadioInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,SAAS;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,eACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,0FAYxB,eAAe,4CAwGjB,CAAC"}
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,SAAS;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,eACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,0FAYxB,eAAe,gBAwGjB,CAAC"}

package/dist/components/Inputs/SelectInput/SelectInput.d.ts

@@ -17,6 +17,6 @@ interface SelectInputProps extends SelectProps {
     className?: string;
     tooltip?: string;
 }
-export declare const SelectInput: ({ id, label, hint, error, options, placeholder, labelAs, labelSize, className, tooltip, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ id, label, hint, error, options, placeholder, labelAs, labelSize, className, tooltip, ...props }: SelectInputProps) => JSX.Element;
 export {};
 //# sourceMappingURL=SelectInput.d.ts.map

package/dist/components/Inputs/SelectInput/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACxC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAE/D,UAAU,gBAAiB,SAAQ,WAAW;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,oGAYzB,gBAAgB,4CA2ElB,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACxC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAE/D,UAAU,gBAAiB,SAAQ,WAAW;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,oGAYzB,gBAAgB,gBA2ElB,CAAC"}

package/dist/components/Inputs/TextAreaInput/TextAreaInput.d.ts

@@ -11,6 +11,6 @@ interface TextareaInputProps extends Omit<JSX.IntrinsicElements["textarea"], "id
     rows?: number;
     className?: string;
 }
-export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, ...props }: TextareaInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, ...props }: TextareaInputProps) => JSX.Element;
 export {};
 //# sourceMappingURL=TextAreaInput.d.ts.map

package/dist/components/Inputs/TextAreaInput/TextAreaInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,kBACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,2EAU3B,kBAAkB,4CA6DpB,CAAC"}
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,kBACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,2EAU3B,kBAAkB,gBA6DpB,CAAC"}

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

@@ -13,6 +13,6 @@ interface TextInputProps extends InputProps {
     suffix?: ReactNode;
     tooltip?: string;
 }
-export declare const TextInput: ({ id, label, hint, error, width, labelSize, labelAs, className, placeholder, suffix, tooltip, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ id, label, hint, error, width, labelSize, labelAs, className, placeholder, suffix, tooltip, ...props }: TextInputProps) => JSX.Element;
 export {};
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/components/Inputs/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAE7D,UAAU,cAAe,SAAQ,UAAU;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,0GAavB,cAAc,4CA8EhB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAE7D,UAAU,cAAe,SAAQ,UAAU;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,0GAavB,cAAc,gBA8EhB,CAAC"}

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -1,12 +1,14 @@
 import type { ReactNode } from "react";
+type NotificationVariant = "neutral" | "success" | "error";
 type Props = {
     title: string;
     heading?: string;
     children: ReactNode;
-    variant?: "success";
+    variant?: NotificationVariant;
     className?: string;
+    fullWidth?: boolean;
     onClose?: () => void;
 };
-export declare const NotificationBanner: ({ title, heading, children, variant, className, onClose, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationBanner: ({ title, heading, children, variant, className, fullWidth, onClose, }: Props) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationBanner.d.ts.map

package/dist/components/NotificationBanner/NotificationBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBanner/NotificationBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,4DAOhC,KAAK,4CA0CP,CAAC"}
+{"version":3,"file":"NotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBanner/NotificationBanner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,kBAAkB,GAAI,uEAQhC,KAAK,gCA4DP,CAAC"}

package/dist/components/NotificationBanner/NotificationBanner.js

@@ -1,7 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-export const NotificationBanner = ({ title, heading, children, variant, className, onClose, }) => {
-    const bannerClass = clsx("govuk-notification-banner", variant === "success" && "govuk-notification-banner--success", className);
-    return (_jsxs("div", { className: bannerClass, role: "alert", "aria-labelledby": "govuk-notification-banner-title", "data-module": "govuk-notification-banner", children: [_jsx("div", { className: "govuk-notification-banner__header", children: _jsx("h2", { className: "govuk-notification-banner__title", id: "govuk-notification-banner-title", children: title }) }), _jsxs("div", { className: "govuk-notification-banner__content", children: [heading && (_jsx("h3", { className: "govuk-notification-banner__heading", children: heading })), _jsx("p", { className: "govuk-body", children: children }), onClose && (_jsx("button", { className: "govuk-link govuk-body-s govuk-!-margin-0", style: { background: "none", border: "none", padding: 0, cursor: "pointer", color: "#1d70b8" }, onClick: onClose, "aria-label": "Close notification", children: "Close" }))] })] }));
+import styles from "./NotificationBanner.module.css";
+const variantClassMap = {
+    neutral: null, // GOV.UK default (blue)
+    success: "govuk-notification-banner--success",
+    error: styles.error, // custom error class
+};
+export const NotificationBanner = ({ title, heading, children, variant = "neutral", className, fullWidth, onClose, }) => {
+    const bannerClass = clsx("govuk-notification-banner", variantClassMap[variant], className);
+    // Neutral and success banners use role="region" because they're informational.
+    // Errors use role="alert" so screen readers announce them immediately.
+    // GDS Design: https://design-system.service.gov.uk/components/notification-banner/
+    const ariaRole = variant === "error" ? "alert" : "region";
+    return (_jsxs("div", { className: bannerClass, role: ariaRole, "aria-labelledby": "govuk-notification-banner-title", "data-module": "govuk-notification-banner", children: [_jsx("div", { className: "govuk-notification-banner__header", children: _jsx("h2", { className: "govuk-notification-banner__title", id: "govuk-notification-banner-title", children: title }) }), _jsxs("div", { className: clsx("govuk-notification-banner__content", fullWidth && styles.fullWidthContent), children: [heading && (_jsx("h3", { className: "govuk-notification-banner__heading", children: heading })), _jsx("p", { className: "govuk-body", children: children }), onClose && (_jsx("button", { className: clsx("govuk-link", "govuk-body-s", "govuk-!-margin-0", styles.closeButton), onClick: onClose, "aria-label": "Close notification", children: "Close" }))] })] }));
 };

package/dist/components/NotificationBanner/NotificationBanner.module.css

@@ -0,0 +1,26 @@
+:root {
+  --error-colour: #d4351c;
+  --neutral-color: #1d70b8;
+}
+
+.error {
+  border-color: var(--error-colour);
+  background-color: var(--error-colour);
+}
+
+.error .govuk-notification-banner__title {
+  color: var(--error-colour);
+}
+
+.fullWidthContent > p {
+  max-width: none !important;
+  width: 100%;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--neutral-color);
+}

package/dist/components/SummaryList/SummaryList.d.ts

@@ -6,7 +6,7 @@ export interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement>
     actions?: SummaryListAction[];
     className?: string;
 }
-export declare const SummaryList: ({ title, children, className, ...props }: SummaryListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SummaryList: ({ title, children, className, ...props }: SummaryListProps) => React.JSX.Element;
 export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     titleTag?: React.ReactNode;
@@ -16,5 +16,5 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     titleBackground?: string;
     subSectionNode?: React.ReactNode;
 }
-export declare const SummaryCard: ({ title, titleTag, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SummaryCard: ({ title, titleTag, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => React.JSX.Element;
 //# sourceMappingURL=SummaryList.d.ts.map

package/dist/components/SummaryList/SummaryList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,8FASzB,gBAAgB,4CAkDlB,CAAC"}
+{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,sBAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,8FASzB,gBAAgB,sBAkDlB,CAAC"}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+export type TableHeader = {
+    content: React.ReactNode;
+    className?: string;
+};
+export type TableCell = {
+    content: React.ReactNode;
+    className?: string;
+    isHeader?: boolean;
+};
+export type TableRow = {
+    cells: TableCell[];
+};
+export type TableProps = {
+    headers: TableHeader[];
+    rows: TableRow[];
+    caption?: string;
+    className?: string;
+};
+export declare const Table: ({ headers, rows, caption, className, }: TableProps) => React.JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,wCAKnB,UAAU,KAAG,KAAK,CAAC,GAAG,CAAC,OA6CzB,CAAC"}

package/dist/components/Table/Table.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+export const Table = ({ headers, rows, caption, className, }) => {
+    return (_jsxs("table", { className: clsx("govuk-table", className), children: [caption && _jsx("caption", { className: "govuk-table__caption", children: caption }), _jsx("thead", { className: "govuk-table__head", children: _jsx("tr", { className: "govuk-table__row", children: headers.map((header, index) => (_jsx("th", { scope: "col", className: clsx("govuk-table__header", header.className), children: header.content }, index))) }) }), _jsx("tbody", { className: "govuk-table__body", children: rows.map((row, rowIndex) => (_jsx("tr", { className: "govuk-table__row", children: row.cells.map((cell, cellIndex) => cell.isHeader ? (_jsx("th", { scope: "row", className: clsx("govuk-table__header", cell.className), children: cell.content }, cellIndex)) : (_jsx("td", { className: clsx("govuk-table__cell", cell.className), children: cell.content }, cellIndex))) }, rowIndex))) })] }));
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -3,6 +3,6 @@ interface TooltipProps {
     label?: string;
     className?: string;
 }
-export declare const Tooltip: ({ text, label, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ text, label, className, }: TooltipProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAOA,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,GAAI,6BAIrB,YAAY,4CAuDd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAOA,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,GAAI,6BAIrB,YAAY,gCAuDd,CAAC"}

package/dist/components/Tooltip/TooltipInfoIcon.d.ts

@@ -1,3 +1,3 @@
 import type { SVGProps } from "react";
-export declare const TooltipInfoIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipInfoIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //# sourceMappingURL=TooltipInfoIcon.d.ts.map

package/dist/components/Tooltip/TooltipInfoIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipInfoIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipInfoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,eAAe,GACxB,OAAO,QAAQ,CAAC,aAAa,CAAC,4CAiBjC,CAAC"}
+{"version":3,"file":"TooltipInfoIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipInfoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,eAAe,GACxB,OAAO,QAAQ,CAAC,aAAa,CAAC,gCAiBjC,CAAC"}

package/dist/components/ViewFormItem/ViewFormItem.d.ts

@@ -6,6 +6,6 @@ interface LinkAndTagItemProps {
     children?: ReactNode;
     tags?: TagProps[];
 }
-export declare const ViewFormItem: ({ name, href, children, tags, }: LinkAndTagItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewFormItem: ({ name, href, children, tags, }: LinkAndTagItemProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ViewFormItem.d.ts.map

package/dist/components/ViewFormItem/ViewFormItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewFormItem.d.ts","sourceRoot":"","sources":["../../../src/components/ViewFormItem/ViewFormItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAIvD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,iCAK1B,mBAAmB,4CAmBrB,CAAC"}
+{"version":3,"file":"ViewFormItem.d.ts","sourceRoot":"","sources":["../../../src/components/ViewFormItem/ViewFormItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAIvD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,iCAK1B,mBAAmB,gCAmBrB,CAAC"}

package/dist/index.d.ts

@@ -16,4 +16,5 @@ export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tabs/Tabs";
+export * from "./components/Table/Table";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oDAAoD,CAAC;AACnE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oDAAoD,CAAC;AACnE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}

package/dist/index.js

@@ -16,3 +16,4 @@ export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tabs/Tabs";
+export * from "./components/Table/Table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.22.7",
+  "version": "0.22.10",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -74,6 +74,6 @@
   "dependencies": {
     "@tanstack/react-query": "^5.90.20",
     "clsx": "^2.1.0",
-    "openapi-fetch": "^0.15.0"
+    "openapi-fetch": "^0.17.0"
   }
 }

package/src/components/NotificationBanner/NotificationBanner.module.css

@@ -0,0 +1,26 @@
+:root {
+  --error-colour: #d4351c;
+  --neutral-color: #1d70b8;
+}
+
+.error {
+  border-color: var(--error-colour);
+  background-color: var(--error-colour);
+}
+
+.error .govuk-notification-banner__title {
+  color: var(--error-colour);
+}
+
+.fullWidthContent > p {
+  max-width: none !important;
+  width: 100%;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--neutral-color);
+}

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -2,34 +2,50 @@
 
 import clsx from "clsx";
 import type { ReactNode } from "react";
+import styles from "./NotificationBanner.module.css";
+
+type NotificationVariant = "neutral" | "success" | "error";
 
 type Props = {
   title: string;
   heading?: string;
   children: ReactNode;
-  variant?: "success"; // only supported variant
+  variant?: NotificationVariant;
   className?: string;
+  fullWidth?: boolean;
   onClose?: () => void;
 };
 
+const variantClassMap: Record<NotificationVariant, string | null> = {
+  neutral: null, // GOV.UK default (blue)
+  success: "govuk-notification-banner--success",
+  error: styles.error, // custom error class
+};
+
 export const NotificationBanner = ({
   title,
   heading,
   children,
-  variant,
+  variant = "neutral",
   className,
+  fullWidth,
   onClose,
 }: Props) => {
   const bannerClass = clsx(
     "govuk-notification-banner",
-    variant === "success" && "govuk-notification-banner--success",
+    variantClassMap[variant],
     className
   );
 
+  // Neutral and success banners use role="region" because they're informational.
+  // Errors use role="alert" so screen readers announce them immediately.
+  // GDS Design: https://design-system.service.gov.uk/components/notification-banner/
+  const ariaRole = variant === "error" ? "alert" : "region";
+
   return (
     <div
       className={bannerClass}
-      role="alert"
+      role={ariaRole}
       aria-labelledby="govuk-notification-banner-title"
       data-module="govuk-notification-banner"
     >
@@ -41,17 +57,30 @@ export const NotificationBanner = ({
           {title}
         </h2>
       </div>
-      <div className="govuk-notification-banner__content">
+
+      <div
+        className={clsx(
+          "govuk-notification-banner__content",
+          fullWidth && styles.fullWidthContent
+        )}
+      >
+
         {heading && (
           <h3 className="govuk-notification-banner__heading">
             {heading}
           </h3>
         )}
+
         <p className="govuk-body">{children}</p>
+
         {onClose && (
           <button
-            className="govuk-link govuk-body-s govuk-!-margin-0"
-            style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: "#1d70b8"  }}
+            className={clsx(
+              "govuk-link",
+              "govuk-body-s",
+              "govuk-!-margin-0",
+              styles.closeButton
+            )}
             onClick={onClose}
             aria-label="Close notification"
           >
@@ -61,4 +90,4 @@ export const NotificationBanner = ({
       </div>
     </div>
   );
-};
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type TableHeader = {
+  content: React.ReactNode;
+  className?: string;
+};
+
+export type TableCell = {
+  content: React.ReactNode;
+  className?: string;
+  isHeader?: boolean;
+};
+
+export type TableRow = {
+  cells: TableCell[];
+};
+
+export type TableProps = {
+  headers: TableHeader[];
+  rows: TableRow[];
+  caption?: string;
+  className?: string;
+};
+
+export const Table = ({
+  headers,
+  rows,
+  caption,
+  className,
+}: TableProps): React.JSX.Element => {
+  return (
+    <table className={clsx("govuk-table", className)}>
+      {caption && <caption className="govuk-table__caption">{caption}</caption>}
+
+      <thead className="govuk-table__head">
+        <tr className="govuk-table__row">
+          {headers.map((header, index) => (
+            <th
+              key={index}
+              scope="col"
+              className={clsx("govuk-table__header", header.className)}
+            >
+              {header.content}
+            </th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody className="govuk-table__body">
+        {rows.map((row, rowIndex) => (
+          <tr key={rowIndex} className="govuk-table__row">
+            {row.cells.map((cell, cellIndex) =>
+              cell.isHeader ? (
+                <th
+                  key={cellIndex}
+                  scope="row"
+                  className={clsx("govuk-table__header", cell.className)}
+                >
+                  {cell.content}
+                </th>
+              ) : (
+                <td
+                  key={cellIndex}
+                  className={clsx("govuk-table__cell", cell.className)}
+                >
+                  {cell.content}
+                </td>
+              ),
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/src/index.ts

@@ -16,3 +16,4 @@ export * from "./components/NotificationBanner/NotificationBanner";
 export * from "./components/Details/Details";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tabs/Tabs";
+export * from "./components/Table/Table";