@tpzdsp/next-toolkit 1.11.3 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",

package/src/components/Button/Button.tsx

@@ -1,6 +1,5 @@
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 type Props = {
   type?: 'submit' | 'reset' | 'button';
@@ -27,7 +26,7 @@ export const Button = ({
   return (
     <button
       type={type}
-      className={twMerge(
+      className={cn(
         `sm:w-auto text-lg relative flex w-full outline-none items-center border-transparent
         justify-center border-2 text-center active-enabled:translate-y-[2px] focus:shadow-focus
         focus:border-focus focus:shadow-[inset_0_0_0_1px] focus-idle:border-focus

package/src/components/Card/Card.tsx

@@ -1,17 +1,20 @@
-import { twMerge } from 'tailwind-merge';
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
 
-export type CardProps = {
-  className?: string;
+type Props = {
   children: React.ReactNode;
 };
 
-export const Card = ({ className, children }: CardProps) => {
+export type CardProps = ExtendProps<'article', Props>;
+
+export const Card = ({ className, children, ...props }: CardProps) => {
   return (
     <article
-      className={twMerge(
+      className={cn(
         'h-full flex flex-col pt-[12px] px-[4px] mx-3 border-t border-slate-500',
         className,
       )}
+      {...props}
     >
       {children}
     </article>

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -5,12 +5,21 @@ import { useId } from 'react';
 import { type FallbackProps } from 'react-error-boundary';
 
 import { ApiError } from '../../errors/ApiError';
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
 import { Accordion } from '../accordion/Accordion';
 import { Button } from '../Button/Button';
 import { Heading } from '../Heading/Heading';
 import { Paragraph } from '../Paragraph/Paragraph';
 
-export const ErrorFallback = ({ resetErrorBoundary, error }: FallbackProps) => {
+export type ErrorFallbackProps = ExtendProps<'div', FallbackProps>;
+
+export const ErrorFallback = ({
+  resetErrorBoundary,
+  error,
+  className,
+  ...props
+}: ErrorFallbackProps) => {
   const id = useId();
 
   let message;
@@ -39,8 +48,12 @@ export const ErrorFallback = ({ resetErrorBoundary, error }: FallbackProps) => {
     <div
       role="alert"
       aria-labelledby={id}
-      className="grid gap-2 border-form border-transparent border-l-error max-w-full pl-2"
+      className={cn(
+        'grid gap-2 border-form border-transparent border-l-error max-w-full pl-2',
+        className,
+      )}
       style={{ gridTemplateColumns: '1fr auto' }}
+      {...props}
     >
       <div className="flex flex-col gap-0.5">
         <Heading id={id} type="h3" className="text-error text-base font-semibold py-0">

package/src/components/ErrorText/ErrorText.tsx

@@ -1,6 +1,5 @@
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 export type ErrorTextProps = ExtendProps<'p'>;
 
@@ -10,7 +9,7 @@ export const ErrorText = ({ className, children, ...props }: ErrorTextProps) =>
   return (
     <Component
       role="alert"
-      className={twMerge('mb-3 text-base text-error font-bold', className)}
+      className={cn('mb-3 text-base text-error font-bold', className)}
       {...props}
     >
       {children}

package/src/components/Heading/Heading.tsx

@@ -1,6 +1,5 @@
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
 
 type Props = {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -9,41 +8,41 @@ type Props = {
 // h1 through h6 have identical props
 export type HeadingProps = ExtendProps<'h1', Props>;
 
-export const Heading = ({ type, className, children }: HeadingProps) => {
+export const Heading = ({ type, className, children, ...props }: HeadingProps) => {
   switch (type) {
     case 'h1':
       return (
-        <h1 className={twMerge('py-4 text-4xl font-bold text-text-primary', className)}>
+        <h1 className={cn('py-4 text-4xl font-bold text-text-primary', className)} {...props}>
           {children}
         </h1>
       );
     case 'h2':
       return (
-        <h2 className={twMerge('py-3 text-3xl font-bold text-text-primary', className)}>
+        <h2 className={cn('py-3 text-3xl font-bold text-text-primary', className)} {...props}>
           {children}
         </h2>
       );
     case 'h3':
       return (
-        <h3 className={twMerge('py-3 text-xl font-bold text-text-primary', className)}>
+        <h3 className={cn('py-3 text-xl font-bold text-text-primary', className)} {...props}>
           {children}
         </h3>
       );
     case 'h4':
       return (
-        <h4 className={twMerge('py-3 text-lg font-bold text-text-primary', className)}>
+        <h4 className={cn('py-3 text-lg font-bold text-text-primary', className)} {...props}>
           {children}
         </h4>
       );
     case 'h5':
       return (
-        <h5 className={twMerge('py-2 text-base font-bold text-text-primary', className)}>
+        <h5 className={cn('py-2 text-base font-bold text-text-primary', className)} {...props}>
           {children}
         </h5>
       );
     case 'h6':
       return (
-        <h6 className={twMerge('py-2 text-sm font-bold text-text-primary', className)}>
+        <h6 className={cn('py-2 text-sm font-bold text-text-primary', className)} {...props}>
           {children}
         </h6>
       );

package/src/components/Hint/Hint.tsx

@@ -1,12 +1,11 @@
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 export type HintProps = ExtendProps<'div'>;
 
 export const Hint = ({ className, children, ...props }: HintProps) => {
   return (
-    <div className={twMerge('mb-2 text-lg text-text-secondary', className)} {...props}>
+    <div className={cn('mb-2 text-lg text-text-secondary', className)} {...props}>
       {children}
     </div>
   );

package/src/components/Modal/Modal.tsx

@@ -5,13 +5,18 @@ import { useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { IoMdCloseCircle } from 'react-icons/io';
 
-type ModalProps = {
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
+
+type Props = {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
 };
 
-export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+export type ModalProps = ExtendProps<'dialog', Props>;
+
+export const Modal = ({ isOpen, onClose, children, className, ...props }: ModalProps) => {
   const modalRef = useRef<HTMLDialogElement>(null);
 
   const handleClose = useCallback(() => {
@@ -36,8 +41,11 @@ export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
         // dialog elements do have a key handler as you can close them with `Escape`, so this can be ignored
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         <dialog
-          className="fixed inset-0 flex items-center justify-center w-full h-full m-0 bg-transparent
-            backdrop:bg-black/50"
+          className={cn(
+            `fixed inset-0 flex items-center justify-center w-full h-full m-0 bg-transparent
+              backdrop:bg-black/50`,
+            className,
+          )}
           ref={modalRef}
           onCancel={(event) => {
             event.preventDefault();
@@ -49,6 +57,7 @@ export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
             // close the modal if the user clicks outside the main content (i.e. on the backdrop)
             handleClose();
           }}
+          {...props}
         >
           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <div

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { NotificationBanner } from './NotificationBanner';
+
+export default {
+  title: 'Components/NotificationBanner',
+  component: NotificationBanner,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A notification banner for displaying important messages. Follows the GOV.UK Design System notification banner pattern. Commonly used wrapped in a <noscript> tag to inform users when JavaScript is required.',
+      },
+    },
+  },
+} as Meta<typeof NotificationBanner>;
+
+export const Default: StoryObj<typeof NotificationBanner> = {
+  args: {
+    message: 'This is an important notification message for users.',
+  },
+};
+
+export const CustomTitle: StoryObj<typeof NotificationBanner> = {
+  args: {
+    title: 'Service Update',
+    message:
+      'This service will be undergoing maintenance on Saturday 15th January from 9am to 5pm.',
+  },
+};
+
+export const JavaScriptRequired: StoryObj<typeof NotificationBanner> = {
+  args: {
+    title: 'Important: JavaScript is required',
+    message:
+      'This application requires JavaScript to display the interactive map and data. Please enable JavaScript in your browser settings to use this service.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example usage for a noscript fallback message.',
+      },
+    },
+  },
+};

package/src/components/NotificationBanner/NotificationBanner.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { NotificationBanner } from './NotificationBanner';
+import { render, screen } from '../../test/renderers';
+
+describe('NotificationBanner Component', () => {
+  it('renders with default title and provided message', () => {
+    render(<NotificationBanner message="Test message content" />);
+
+    const heading = screen.getByRole('heading', { name: 'Important' });
+    const message = screen.getByText('Test message content');
+
+    expect(heading).toHaveAttribute('id', 'notification-banner-title');
+    expect(heading).toBeInTheDocument();
+    expect(message).toBeInTheDocument();
+  });
+
+  it('renders with custom title and message', () => {
+    render(<NotificationBanner title="Custom Title" message="Custom message content" />);
+
+    const heading = screen.getByRole('heading', { name: 'Custom Title' });
+    const message = screen.getByText('Custom message content');
+
+    expect(heading).toBeInTheDocument();
+    expect(message).toBeInTheDocument();
+  });
+
+  it('renders as a section with aria-labelledby', () => {
+    render(<NotificationBanner message="Test message" />);
+
+    const section = screen.getByRole('region', { name: 'Important' });
+
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveAttribute('aria-labelledby', 'notification-banner-title');
+  });
+
+  it('applies default styling classes', () => {
+    render(<NotificationBanner message="Test message" />);
+
+    const section = screen.getByRole('region');
+
+    expect(section).toHaveClass('bg-brand', 'text-white', 'font-gds');
+  });
+
+  it('allows custom className to be merged', () => {
+    render(<NotificationBanner message="Test message" className="custom-class" />);
+
+    const section = screen.getByRole('region');
+
+    expect(section).toHaveClass('bg-brand', 'text-white', 'font-gds', 'custom-class');
+  });
+
+  it('spreads additional props to section element', () => {
+    render(<NotificationBanner message="Test message" data-testid="notification-banner" />);
+
+    const section = screen.getByTestId('notification-banner');
+
+    expect(section).toBeInTheDocument();
+  });
+});

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -0,0 +1,45 @@
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
+import { Heading } from '../Heading/Heading';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+type Props = {
+  title?: string;
+  message: string;
+  /** Explicitly disallow children as we use title and message props instead */
+  children?: never;
+};
+
+export type NotificationBannerProps = ExtendProps<'section', Props>;
+
+/**
+ * A notification banner component for displaying important messages.
+ * Follows the GOV.UK Design System notification banner pattern.
+ *
+ * Common use cases:
+ * - Wrapped in <noscript> to inform users that JavaScript is required
+ * - Service announcements or maintenance notices
+ * - Important information that needs prominent display
+ */
+export const NotificationBanner = ({
+  title = 'Important',
+  message,
+  className,
+  ...props
+}: NotificationBannerProps) => (
+  <section
+    aria-labelledby="notification-banner-title"
+    className={cn('bg-brand text-white font-gds', className)}
+    {...props}
+  >
+    <div className="px-4 py-2 border-b border-white/30">
+      <Heading type="h2" id="notification-banner-title" className="text-lg text-white py-2">
+        {title}
+      </Heading>
+    </div>
+
+    <div className="p-4">
+      <Paragraph className="text-lg text-white pb-0">{message}</Paragraph>
+    </div>
+  </section>
+);

package/src/components/Paragraph/Paragraph.tsx

@@ -1,12 +1,11 @@
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 export type ParagraphProps = ExtendProps<'p'>;
 
 export const Paragraph = ({ className, children, ...props }: ParagraphProps) => {
   return (
-    <p className={twMerge('pb-4 text-sm text-text-primary', className)} {...props}>
+    <p className={cn('pb-4 text-sm text-text-primary', className)} {...props}>
       {children}
     </p>
   );

package/src/components/SlidingPanel/SlidingPanel.tsx

@@ -4,20 +4,27 @@ import { useState, useEffect, type ReactNode, useRef, useMemo, useId } from 'rea
 
 import { FocusTrap } from 'focus-trap-react';
 
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
+
 type Position = 'center-left' | 'center-right' | 'center-top' | 'center-bottom';
 
-export type SlidingPanelProps = {
+type Props = {
   children: ReactNode;
   position?: Position;
   tabLabel?: string;
   defaultOpen?: boolean;
 };
 
+export type SlidingPanelProps = ExtendProps<'div', Props>;
+
 export const SlidingPanel = ({
   children,
   tabLabel = 'Open',
   position = 'center-left',
   defaultOpen = false,
+  className,
+  ...props
 }: SlidingPanelProps) => {
   const id = useId();
 
@@ -145,7 +152,13 @@ export const SlidingPanel = ({
   };
 
   return (
-    <div className="absolute inset-0 z-30 overflow-hidden pointer-events-none sliding-panel">
+    <div
+      className={cn(
+        'absolute inset-0 z-30 overflow-hidden pointer-events-none sliding-panel',
+        className,
+      )}
+      {...props}
+    >
       <button
         className={`pointer-events-auto ${buttonPosition} bg-gray-700 text-white z-40 focus-yellow`}
         style={getButtonStyle}

package/src/components/accordion/Accordion.tsx

@@ -3,22 +3,35 @@
 import { type ReactNode, useId, useState } from 'react';
 
 import { LuChevronDown } from 'react-icons/lu';
-import { twMerge } from 'tailwind-merge';
 
-export type AccordionProps = {
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
+
+type Props = {
   title: string;
   children: ReactNode;
   defaultOpen?: boolean;
 };
 
-export const Accordion = ({ title, children, defaultOpen = false }: AccordionProps) => {
+export type AccordionProps = ExtendProps<'div', Props>;
+
+export const Accordion = ({
+  title,
+  children,
+  defaultOpen = false,
+  className,
+  ...props
+}: AccordionProps) => {
   const contentId = useId();
   const buttonId = useId();
 
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
-    <div className="flex flex-col gap-2 border-l-2 border-neutral-100 rounded-md">
+    <div
+      className={cn('flex flex-col gap-2 border-l-2 border-neutral-100 rounded-md', className)}
+      {...props}
+    >
       <button
         aria-expanded={isOpen}
         aria-controls={contentId}
@@ -31,7 +44,7 @@ export const Accordion = ({ title, children, defaultOpen = false }: AccordionPro
         <span>{title}</span>
 
         <span aria-hidden="true">
-          <LuChevronDown className={twMerge('w-4 h-4', isOpen ? 'rotate-180' : '')} />
+          <LuChevronDown className={cn('w-4 h-4', isOpen ? 'rotate-180' : '')} />
         </span>
       </button>
 
@@ -39,7 +52,7 @@ export const Accordion = ({ title, children, defaultOpen = false }: AccordionPro
         id={contentId}
         aria-labelledby={buttonId}
         aria-hidden={!isOpen}
-        className={twMerge('px-2 pb-1', isOpen ? 'block' : 'hidden')}
+        className={cn('px-2 pb-1', isOpen ? 'block' : 'hidden')}
       >
         {children}
       </section>

package/src/components/backToTop/BackToTop.tsx

@@ -4,24 +4,28 @@ import { type KeyboardEvent, useCallback, useEffect, useState } from 'react';
 
 import { LuArrowUp } from 'react-icons/lu';
 
-import { KeyboardKeys } from '../../utils';
+import type { ExtendProps } from '../../types';
+import { cn, KeyboardKeys } from '../../utils';
 
-export type BackToTopProps = {
+type Props = {
   /** Scroll threshold in pixels before button appears */
   threshold?: number;
   /** Position from bottom in pixels */
   bottom?: number;
   /** Position from left in pixels */
   left?: number;
-  /** Custom className for styling */
-  className?: string;
+  /** Explicitly disallow children as we hard-code the button content */
+  children?: never;
 };
 
+export type BackToTopProps = ExtendProps<'button', Props>;
+
 export const BackToTop = ({
   threshold = 600,
   bottom = 16,
   left = 8,
-  className = '',
+  className,
+  ...props
 }: BackToTopProps) => {
   const [isVisible, setIsVisible] = useState(false);
 
@@ -104,16 +108,12 @@ export const BackToTop = ({
   return (
     <button
       type="button"
-      className={`
-        fixed z-50 inline-flex items-center gap-1
-        bg-white text-link border border-gray-300
-        rounded-md px-3 py-2 shadow-lg
-        hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
-        transition-all duration-200 ease-in-out
-        ${className}
-      `.trim()}
-      // className={`fixed bottom-4 left-2 text-link gap-1 inline-flex items-center bg-white
-      //   ${className}`.trim()}
+      className={cn(
+        `fixed z-50 inline-flex items-center gap-1 bg-white text-link border border-gray-300
+        rounded-md px-3 py-2 shadow-lg hover:bg-gray-50 focus:outline-none focus:ring-2
+        focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 ease-in-out`,
+        className,
+      )}
       style={{
         bottom: `${bottom}px`,
         left: `${left}px`,
@@ -122,6 +122,7 @@ export const BackToTop = ({
       onKeyDown={handleKeyDown}
       aria-label="Scroll back to top of page"
       title="Back to top"
+      {...props}
     >
       <LuArrowUp size={20} aria-hidden="true" />
 

package/src/components/chip/Chip.tsx

@@ -1,18 +1,21 @@
-import { twMerge } from 'tailwind-merge';
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
 
-export type ChipProps = {
+type Props = {
   children: React.ReactNode;
-  className?: string;
 };
 
-export const Chip = ({ className, children }: ChipProps) => {
+export type ChipProps = ExtendProps<'span', Props>;
+
+export const Chip = ({ className, children, ...props }: ChipProps) => {
   return (
     <span
-      className={twMerge(
+      className={cn(
         `inline-flex items-center rounded-lg bg-gray-200 px-3 py-1 text-sm font-medium
         text-gray-800`,
         className,
       )}
+      {...props}
     >
       {children}
     </span>

package/src/components/container/Container.tsx

@@ -1,14 +1,16 @@
 import type { ReactNode } from 'react';
 
+import type { ExtendProps } from '../../types';
 import { cn } from '../../utils';
 
-export type ContainerProps = {
+type Props = {
   children: ReactNode;
-  className?: string;
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
   centerContent?: boolean;
 };
 
+export type ContainerProps = ExtendProps<'div', Props>;
+
 const containerSizes = {
   sm: 'max-w-3xl',
   md: 'max-w-5xl',
@@ -22,6 +24,7 @@ export const Container = ({
   className,
   size = 'lg',
   centerContent = false,
+  ...props
 }: ContainerProps) => {
   return (
     <div
@@ -31,6 +34,7 @@ export const Container = ({
         centerContent && 'flex items-center justify-center min-h-screen',
         className,
       )}
+      {...props}
     >
       {children}
     </div>

package/src/components/divider/RuleDivider.tsx

@@ -1,10 +1,15 @@
-type RuleDividerProps = {
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
+
+type Props = {
   children?: React.ReactNode;
 };
 
-export const RuleDivider = ({ children }: RuleDividerProps) => {
+export type RuleDividerProps = ExtendProps<'div', Props>;
+
+export const RuleDivider = ({ children, className, ...props }: RuleDividerProps) => {
   return (
-    <div className="flex items-center">
+    <div className={cn('flex items-center', className)} {...props}>
       <hr className="flex-grow" />
       {children ? (
         <>

package/src/components/dropdown/DropdownMenu.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import type { ComponentType } from 'react';
+import type { ComponentType, HTMLAttributes } from 'react';
 
 import { LuChevronDown } from 'react-icons/lu';
-import { twMerge } from 'tailwind-merge';
 
 import {
   type ButtonRendererProps,
   type ItemRendererProps,
   useDropdownMenu,
 } from './useDropdownMenu';
+import { cn } from '../../utils';
 
 export type DropdownMenuItem<ItemProps extends object> = ItemRendererProps & {
   label: string;
@@ -17,7 +17,7 @@ export type DropdownMenuItem<ItemProps extends object> = ItemRendererProps & {
 
 export type DrowndownMenuButton = ButtonRendererProps;
 
-type DropdownMenuProps<ItemProps extends object> = {
+type DropdownMenuProps<ItemProps extends object> = HTMLAttributes<HTMLDivElement> & {
   items: DropdownMenuItem<ItemProps>[];
   containerClassName?: string;
   menuContainerClassName?: string;
@@ -32,7 +32,7 @@ const DefaultButton = ({ state: { isOpen }, ...props }: ButtonRendererProps) =>
     <button
       {...props}
       aria-label="Open Menu"
-      className={twMerge(
+      className={cn(
         `text-black flex gap-2 items-center justify-center border rounded-md border-gray-300
         bg-white px-2 py-1 text-sm shadow-sm focus:border-brand focus:outline-none focus:ring-1
         focus:ring-brand`,
@@ -51,7 +51,7 @@ const DefaultItem = <Item extends object>({ label, ...props }: DropdownMenuItem<
     <div
       {...props}
       aria-label={label}
-      className={twMerge(
+      className={cn(
         `text-black cursor-pointer hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300 px-2
         py-1`,
         props.className,
@@ -70,6 +70,8 @@ export const DropdownMenu = <Item extends object>({
   buttonClassName,
   itemRenderer = DefaultItem,
   itemClassName,
+  className,
+  ...props
 }: DropdownMenuProps<Item>) => {
   // rebind to avoid linting errors
   const ButtonRenderer = buttonRenderer;
@@ -78,13 +80,13 @@ export const DropdownMenu = <Item extends object>({
   const { isOpen, buttonProps, itemProps } = useDropdownMenu(items.length);
 
   return (
-    <div className={twMerge('relative', containerClassName)}>
+    <div className={cn('relative', containerClassName, className)} {...props}>
       <ButtonRenderer {...buttonProps} className={buttonClassName} />
 
       <div
         style={{ display: isOpen ? 'flex' : 'none' }}
         aria-hidden={!isOpen}
-        className={twMerge(
+        className={cn(
           `absolute right-0 mt-1 bg-white border shadow-md rounded-md min-w-full flex-col gap-0
           z-[999] divide-y divide-slate-400`,
           menuContainerClassName,

package/src/components/form/Input.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 type Props = {
   hasError?: boolean;
@@ -14,7 +13,7 @@ export const Input = ({ hasError, className, ...props }: InputProps) => {
   return (
     <input
       {...props}
-      className={twMerge(
+      className={cn(
         'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
         hasError ? 'border-error' : '',
         className,

package/src/components/form/TextArea.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 type Props = {
   hasError?: boolean;
@@ -14,7 +13,7 @@ export const TextArea = ({ hasError, className, ...props }: TextAreaProps) => {
   return (
     <textarea
       {...props}
-      className={twMerge(
+      className={cn(
         'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
         hasError ? 'border-error' : '',
         className,

package/src/components/index.ts

@@ -10,6 +10,7 @@ export { GlobalVars } from './googleAnalytics/GlobalVars';
 export { GoogleAnalytics } from './googleAnalytics/GoogleAnalytics';
 export { Heading } from './Heading/Heading';
 export { Hint } from './Hint/Hint';
+export { NotificationBanner } from './NotificationBanner/NotificationBanner';
 export { DefraLogo } from './images/DefraLogo';
 export { EaLogo } from './images/EaLogo';
 export { OglLogo } from './images/OglLogo';
@@ -30,6 +31,7 @@ export type { ContainerProps } from './container/Container';
 export type { ErrorTextProps } from './ErrorText/ErrorText';
 export type { HeadingProps } from './Heading/Heading';
 export type { HintProps } from './Hint/Hint';
+export type { NotificationBannerProps } from './NotificationBanner/NotificationBanner';
 export type { ExternalLinkProps } from './link/ExternalLink';
 export type { LinkProps } from './link/Link';
 export type { ParagraphProps } from './Paragraph/Paragraph';

package/src/components/link/ExternalLink.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
 
-import { twMerge } from 'tailwind-merge';
-
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 type Props = {
   children: ReactNode;
@@ -13,7 +12,7 @@ export type ExternalLinkProps = ExtendProps<'a', Props>;
 export const ExternalLink = ({ href, className, children, ...props }: ExternalLinkProps) => (
   <a
     {...props}
-    className={twMerge(
+    className={cn(
       `cursor-pointer text-link hover:decoration-[max(3px,_.1875rem,_.12em)] hover:text-link-hover
       visited:text-link-visited focus:decoration-[max(3px,_.1875rem,_.12em)]
       decoration-[max(1px,_.0625rem)] underline-offset-[0.1578em] underline outline-none

package/src/components/link/Link.tsx

@@ -1,7 +1,7 @@
 import NextLink from 'next/link';
-import { twMerge } from 'tailwind-merge';
 
 import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
 
 type Props = {
   href: string | object;
@@ -12,7 +12,7 @@ export type LinkProps = ExtendProps<typeof NextLink, Props>;
 export const Link = ({ href, className, children, ...props }: LinkProps) => (
   <NextLink
     {...props}
-    className={twMerge(
+    className={cn(
       `cursor-pointer text-link hover:decoration-[max(3px,_.1875rem,_.12em)] hover:text-link-hover
       visited:text-link-visited active:text-black focus:decoration-[max(3px,_.1875rem,_.12em)]
       decoration-[max(1px,_.0625rem)] underline-offset-[0.1578em] underline outline-none

package/src/components/select/Select.tsx

@@ -12,9 +12,9 @@ import type {
   Props as ReactSelectProps,
 } from 'react-select';
 import { components, default as ReactSelect } from 'react-select';
-import { twMerge } from 'tailwind-merge';
 
 import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+import { cn } from '../../utils';
 
 // extends the react-select props with some of our own
 export type SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
@@ -26,9 +26,9 @@ const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<
   userClassNames?: ClassNamesConfig<Option, IsMulti, Group>,
 ): ClassNamesConfig<Option, IsMulti, Group> => {
   return {
-    container: (props) => twMerge(SELECT_CONTAINER_CLASSES, userClassNames?.container?.(props)),
+    container: (props) => cn(SELECT_CONTAINER_CLASSES, userClassNames?.container?.(props)),
     control: (props) =>
-      twMerge(
+      cn(
         SELECT_CONTROL_CLASSES,
         SELECT_MIN_HEIGHT,
         props.isDisabled ? '!cursor-not-allowed bg-gray-100' : 'bg-white',
@@ -37,43 +37,37 @@ const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<
           : '',
         userClassNames?.control?.(props),
       ),
-    dropdownIndicator: (props) => twMerge('w-4 h-4', userClassNames?.dropdownIndicator?.(props)),
-    placeholder: (props) => twMerge('text-text-secondary', userClassNames?.placeholder?.(props)),
+    dropdownIndicator: (props) => cn('w-4 h-4', userClassNames?.dropdownIndicator?.(props)),
+    placeholder: (props) => cn('text-text-secondary', userClassNames?.placeholder?.(props)),
     menu: (props) =>
-      twMerge(
+      cn(
         'bg-white rounded-md border  mt-1 overflow-hidden shadow-sm shadow-[0px_0px_6px_0px_#00000044]',
         userClassNames?.menu?.(props),
       ),
-    menuList: (props) => twMerge('flex flex-col', userClassNames?.menuList?.(props)),
+    menuList: (props) => cn('flex flex-col', userClassNames?.menuList?.(props)),
     option: (props) =>
-      twMerge(
+      cn(
         'overflow-x-hidden text-ellipsis px-4 py-1 shrink-0',
         !props.isSelected && props.isFocused ? 'bg-slate-100' : '',
         props.isSelected ? 'bg-brand text-white' : '',
         userClassNames?.option?.(props),
       ),
-    noOptionsMessage: (props) => twMerge('px-4 py-1', userClassNames?.noOptionsMessage?.(props)),
+    noOptionsMessage: (props) => cn('px-4 py-1', userClassNames?.noOptionsMessage?.(props)),
     clearIndicator: (props) =>
-      twMerge(
-        'cursor-pointer pointer-events-auto w-4 h-4',
-        userClassNames?.clearIndicator?.(props),
-      ),
+      cn('cursor-pointer pointer-events-auto w-4 h-4', userClassNames?.clearIndicator?.(props)),
     indicatorsContainer: (props) =>
-      twMerge(
-        'flex gap-1 items-center justify-center',
-        userClassNames?.indicatorsContainer?.(props),
-      ),
+      cn('flex gap-1 items-center justify-center', userClassNames?.indicatorsContainer?.(props)),
     indicatorSeparator: (props) =>
-      twMerge(
+      cn(
         props.isMulti && props.hasValue ? 'bg-border-input/30' : '',
         userClassNames?.indicatorSeparator?.(props),
       ),
     multiValue: (props) =>
-      twMerge(
+      cn(
         'flex gap-2 items-center justify-center px-2 bg-brand text-white rounded-md m-[2px]',
         userClassNames?.multiValue?.(props),
       ),
-    multiValueRemove: (props) => twMerge('w-3 h-3', userClassNames?.multiValueRemove?.(props)),
+    multiValueRemove: (props) => cn('w-3 h-3', userClassNames?.multiValueRemove?.(props)),
   };
 };
 

package/src/components/select/SelectSkeleton.tsx

@@ -1,15 +1,18 @@
-import { twMerge } from 'tailwind-merge';
-
 import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+import type { ExtendProps } from '../../types';
+import { cn } from '../../utils';
 
-export type SelectSkeletonProps = {
-  className?: string;
+type Props = {
+  /** Explicitly disallow children as we hard-code the skeleton content */
+  children?: never;
 };
 
-export const SelectSkeleton = ({ className }: SelectSkeletonProps = {}) => {
+export type SelectSkeletonProps = ExtendProps<'div', Props>;
+
+export const SelectSkeleton = ({ className, ...props }: SelectSkeletonProps = {}) => {
   return (
-    <div className={twMerge(SELECT_CONTAINER_CLASSES, className)}>
-      <div className={twMerge(SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT)}>
+    <div className={cn(SELECT_CONTAINER_CLASSES, className)} {...props}>
+      <div className={cn(SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT)}>
         <div
           className="w-full h-full bg-gray-100 animate-pulse rounded-md col-span-2"
           aria-label="Loading options"

package/src/components/skipLink/SkipLink.tsx

@@ -1,13 +1,22 @@
 'use client';
 
-import { KeyboardKeys } from '../../utils';
+import type { ExtendProps } from '../../types';
+import { cn, KeyboardKeys } from '../../utils';
 import { Link } from '../link/Link';
 
-export type SkipLinkProps = {
+type Props = {
   mainContentId?: string;
+  /** Explicitly disallow children as we hard-code the link content */
+  children?: never;
 };
 
-export const SkipLink = ({ mainContentId = 'main-content' }: SkipLinkProps) => {
+export type SkipLinkProps = ExtendProps<'nav', Props>;
+
+export const SkipLink = ({
+  mainContentId = 'main-content',
+  className,
+  ...props
+}: SkipLinkProps) => {
   const handleActivate = () => {
     // Let the browser scroll first, then move focus
     setTimeout(() => {
@@ -20,7 +29,7 @@ export const SkipLink = ({ mainContentId = 'main-content' }: SkipLinkProps) => {
   };
 
   return (
-    <nav aria-label="Skip navigation">
+    <nav aria-label="Skip navigation" className={cn(className)} {...props}>
       <Link
         className="absolute w-full p-3 text-black bg-focus focus:relative focus:top-0 -top-full
           visited:text-black hover:text-black skip-link"