@moduk/frontend 1.6.0 → 1.7.1

package/dist/nunjucks/moduk/components/character-count/__examples__/with-custom-messages.njk

@@ -0,0 +1,25 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "with-hint",
+  id: "with-hint",
+  maxlength: 200,
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "Do not include personal information like your service number."
+  },
+  charactersAtLimitText: "characters at limit",
+  charactersOverLimitText: {
+    one: "characters over limit, one, %{count}",
+    other: "characters over limit, other, %{count}"
+  },
+  charactersUnderLimitText: {
+    one: "characters under limit, one, %{count}",
+    other: "characters under limit, other, %{count}"
+  },
+  textareaDescriptionText: "description text, %{count}"
+}) -}}

package/dist/nunjucks/moduk/components/character-count/__examples__/with-word-count-custom-messages.njk

@@ -0,0 +1,25 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "with-hint",
+  id: "with-hint",
+  maxwords: 5,
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "Do not include personal information like your service number."
+  },
+  wordsAtLimitText: "words at limit",
+  wordsOverLimitText: {
+    one: "words over limit, one, %{count}",
+    other: "words over limit, other, %{count}"
+  },
+  wordsUnderLimitText: {
+    one: "words under limit, one, %{count}",
+    other: "words under limit, other, %{count}"
+  },
+  textareaDescriptionText: "description text, %{count}"
+}) -}}

package/dist/nunjucks/moduk/components/fieldset/__examples__/not-as-page-heading.njk

@@ -0,0 +1,44 @@
+{% from "moduk/components/input/macro.njk" import modukInput -%}
+{% from "moduk/components/fieldset/macro.njk" import modukFieldset -%}
+
+{% call modukFieldset({
+  legend: {
+    text: "What is your address?",
+    classes: "govuk-fieldset__legend--s"
+  }
+}) -%}
+  {{ modukInput({
+    label: {
+      text: 'Address line 1'
+    },
+    id: "address-line-1",
+    name: "address-line-1",
+    autocomplete: "address-line1"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: 'Address line 2 (optional)'
+    },
+    id: "address-line-2",
+    name: "address-line-2",
+    autocomplete: "address-line2"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: "Town or city"
+    },
+    classes: "govuk-!-width-two-thirds",
+    id: "address-town",
+    name: "address-town",
+    autocomplete: "address-level2"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: "Postcode"
+    },
+    classes: "govuk-input--width-10",
+    id: "address-postcode",
+    name: "address-postcode",
+    autocomplete: "postal-code"
+  }) -}}
+{% endcall -%}

package/dist/nunjucks/moduk/components/notification-banner/__examples__/with-custom-title.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{{ modukNotificationBanner({
+  titleText: 'Custom title',
+  text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
+}) -}}

package/dist/nunjucks/moduk/components/notification-banner/__examples__/with-disable-auto-focus.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{{ modukNotificationBanner({
+  disableAutoFocus: true,
+  text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
+}) -}}

package/nunjucks/moduk/components/character-count/__examples__/with-custom-messages.njk

@@ -0,0 +1,25 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "with-hint",
+  id: "with-hint",
+  maxlength: 200,
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "Do not include personal information like your service number."
+  },
+  charactersAtLimitText: "characters at limit",
+  charactersOverLimitText: {
+    one: "characters over limit, one, %{count}",
+    other: "characters over limit, other, %{count}"
+  },
+  charactersUnderLimitText: {
+    one: "characters under limit, one, %{count}",
+    other: "characters under limit, other, %{count}"
+  },
+  textareaDescriptionText: "description text, %{count}"
+}) -}}

package/nunjucks/moduk/components/character-count/__examples__/with-word-count-custom-messages.njk

@@ -0,0 +1,25 @@
+{% from "moduk/components/character-count/macro.njk" import modukCharacterCount -%}
+
+{{ modukCharacterCount({
+  name: "with-hint",
+  id: "with-hint",
+  maxwords: 5,
+  label: {
+    text: "Can you provide more detail?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "Do not include personal information like your service number."
+  },
+  wordsAtLimitText: "words at limit",
+  wordsOverLimitText: {
+    one: "words over limit, one, %{count}",
+    other: "words over limit, other, %{count}"
+  },
+  wordsUnderLimitText: {
+    one: "words under limit, one, %{count}",
+    other: "words under limit, other, %{count}"
+  },
+  textareaDescriptionText: "description text, %{count}"
+}) -}}

package/nunjucks/moduk/components/fieldset/__examples__/not-as-page-heading.njk

@@ -0,0 +1,44 @@
+{% from "moduk/components/input/macro.njk" import modukInput -%}
+{% from "moduk/components/fieldset/macro.njk" import modukFieldset -%}
+
+{% call modukFieldset({
+  legend: {
+    text: "What is your address?",
+    classes: "govuk-fieldset__legend--s"
+  }
+}) -%}
+  {{ modukInput({
+    label: {
+      text: 'Address line 1'
+    },
+    id: "address-line-1",
+    name: "address-line-1",
+    autocomplete: "address-line1"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: 'Address line 2 (optional)'
+    },
+    id: "address-line-2",
+    name: "address-line-2",
+    autocomplete: "address-line2"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: "Town or city"
+    },
+    classes: "govuk-!-width-two-thirds",
+    id: "address-town",
+    name: "address-town",
+    autocomplete: "address-level2"
+  }) -}}
+  {{ modukInput({
+    label: {
+      text: "Postcode"
+    },
+    classes: "govuk-input--width-10",
+    id: "address-postcode",
+    name: "address-postcode",
+    autocomplete: "postal-code"
+  }) -}}
+{% endcall -%}

package/nunjucks/moduk/components/notification-banner/__examples__/with-custom-title.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{{ modukNotificationBanner({
+  titleText: 'Custom title',
+  text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
+}) -}}

package/nunjucks/moduk/components/notification-banner/__examples__/with-disable-auto-focus.njk

@@ -0,0 +1,6 @@
+{% from "moduk/components/notification-banner/macro.njk" import modukNotificationBanner -%}
+
+{{ modukNotificationBanner({
+  disableAutoFocus: true,
+  text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
+}) -}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduk/frontend",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "The MOD.UK Frontend contains the code you need to start building a user interface for Ministry of Defence platforms and services.",
   "main": "lib/index.js",
   "sass": "src/css/index.scss",
@@ -38,7 +38,7 @@
     "build:assets": "ts-node scripts/copy-govuk-static-assets.ts && npm run build:assets:svg",
     "build:assets:svg": "shx mkdir -p assets/svg && cp src/assets/svg/* assets/svg",
     "prebuild:client": "shx rm -rf client",
-    "build:client": "npm run build:client:umd && npm run build:client:es && npm run build:client:react && tsc --project src/client",
+    "build:client": "npm run build:client:umd && npm run build:client:es && npm run build:client:react",
     "build:client:umd": "webpack --config webpack.config.ts",
     "build:client:es": "babel src/client/index.ts --extensions .ts,.tsx --out-file client/moduk-frontend.mjs",
     "prebuild:client:react": "shx rm -rf react",
@@ -101,7 +101,7 @@
     "@axe-core/playwright": "^4.7.3",
     "@babel/cli": "^7.22.10",
     "@babel/core": "^7.22.11",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
     "@babel/register": "^7.22.5",
@@ -130,16 +130,16 @@
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unicorn": "^48.0.1",
     "glob": "^10.2.2",
-    "happy-dom": "^10.8.0",
+    "happy-dom": "^10.11.2",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^14.0.1",
     "postcss-cli": "^10.1.0",
     "postcss-fail-on-warn": "^0.2.1",
-    "postcss-preset-env": "^8.4.1",
+    "postcss-preset-env": "^9.1.2",
     "react-merge-refs": "^2.0.2",
     "release-it": "^16.1.5",
     "sass": "^1.63.4",

package/react/MODUKBody/MODUKBody.d.ts

@@ -1,5 +1,12 @@
 import { type ComponentPropsWithoutRef } from 'react';
 /**
+ * Replacement for <body> tag when using React to render the
+ * entire page.
+ *
+ * This handles adding the `js-enabled` CSS class to the body
+ * element when JavaScript is available, ensuring interactive
+ * components are styled correctly.
+ *
  * @experimental React components are in alpha and subject to change.
  */
 export declare const MODUKBody: ({ children, className, ...rest }: ComponentPropsWithoutRef<'body'>) => import("react/jsx-runtime").JSX.Element;

package/react/MODUKBody/MODUKBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MODUKBody.d.ts","sourceRoot":"","sources":["../../../src/react/MODUKBody/MODUKBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,wBAAwB,EAAuB,MAAM,OAAO,CAAA;AAE1E;;GAEG;AACH,eAAO,MAAM,SAAS,qCAAsC,yBAAyB,MAAM,CAAC,4CAO3F,CAAA"}
+{"version":3,"file":"MODUKBody.d.ts","sourceRoot":"","sources":["../../../src/react/MODUKBody/MODUKBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,wBAAwB,EAAuB,MAAM,OAAO,CAAA;AAE1E;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,qCAAsC,yBAAyB,MAAM,CAAC,4CAO3F,CAAA"}

package/react/accordion/Accordion.d.ts

@@ -3,19 +3,84 @@ import type { PermissiveChild } from '../internal/PermissiveChild';
 import type { AccordionHeadingTag } from './AccordionHeadingTag';
 import type { AccordionItemProps } from './AccordionItem';
 export interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Instances of AccordionItem.
+     */
     children: PermissiveChild<AccordionItemProps>;
+    /**
+     * HTML tag to use for item headings.
+     */
     headingTag?: AccordionHeadingTag;
+    /**
+     * The text content of the 'Hide all sections' button at
+     * the top of the accordion when all sections are expanded.
+     */
     hideAllSectionsText?: string;
+    /**
+     * The text content of the 'Hide' button within each section
+     * of the accordion, which is visible when the section is
+     * expanded.
+     */
     hideSectionText?: string;
+    /**
+     * Text made available to assistive technologies, like
+     * screen readers, as the final part of the toggle's
+     * accessible name when the section is expanded. Defaults
+     * to 'Hide this section'.
+     */
     hideSectionAriaLabelText?: string;
+    /**
+     * Unique identifier for the accordion.
+     *
+     * Must be unique across the domain of your service if
+     * rememberExpanded is set.
+     */
     id: string;
+    /**
+     * Whether the expanded/collapsed state of the accordion
+     * should be saved when a user leaves the page and restored
+     * when they return. Default is true.
+     */
     rememberExpanded?: boolean;
+    /**
+     * The text content of the 'Show all sections' button at the
+     * top of the accordion when at least one section is collapsed.
+     */
     showAllSectionsText?: string;
+    /**
+     * Text made available to assistive technologies, like screen
+     * readers, as the final part of the toggle's accessible name
+     * when the section is collapsed. Defaults to 'Show this
+     * section'.
+     */
     showSectionAriaLabelText?: string;
+    /**
+     * The text content of the 'Show' button within each section
+     * of the accordion, which is visible when the section is
+     * collapsed.
+     */
     showSectionText?: string;
 }
 /**
+ * Accordion.
+ *
  * @experimental React components are in alpha and subject to change.
+ *
+ * @example
+ * <Accordion id='example-accordion'>
+ *   <AccordionItem heading='Writing well for the web'>
+ *     <p className='govuk-body'>This is the content for Writing well for the web.</p>
+ *   </AccordionItem>
+ *   <AccordionItem heading='Writing well for specialists'>
+ *     <p className='govuk-body'>This is the content for Writing well for specialists.</p>
+ *   </AccordionItem>
+ *   <AccordionItem heading='Know your audience'>
+ *     <p className='govuk-body'>This is the content for Know your audience.</p>
+ *   </AccordionItem>
+ *   <AccordionItem heading='How people read'>
+ *     <p className='govuk-body'>This is the content for How people read.</p>
+ *   </AccordionItem>
+ * </Accordion>
  */
 export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Accordion.d.ts.map

package/react/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/react/accordion/Accordion.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,wBAAwB,EAA+C,MAAM,OAAO,CAAA;AAM5G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,MAAM,WAAW,cAAe,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrE,QAAQ,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAA;IAC7C,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAoBD;;GAEG;AACH,eAAO,MAAM,SAAS,2GA2DrB,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/react/accordion/Accordion.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,wBAAwB,EAA+C,MAAM,OAAO,CAAA;AAMlG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,MAAM,WAAW,cAAe,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrE;;OAEG;IACH,QAAQ,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAA;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAoBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,2GA8DrB,CAAA"}

package/react/accordion/AccordionItem.d.ts

@@ -1,11 +1,25 @@
 import { type ReactNode, type ReactPortal } from 'react';
 export interface AccordionItemProps {
+    /**
+     * Content for the section.
+     */
     children: Exclude<ReactNode, ReactPortal | null | undefined>;
+    /**
+     * Whether this section is expanded.
+     */
     expanded?: boolean;
+    /**
+     * Heading for the section.
+     */
     heading: Exclude<ReactNode, ReactPortal | null | undefined>;
+    /**
+     * Summary line content.
+     */
     summary?: Exclude<ReactNode, ReactPortal>;
 }
 /**
+ * An accordion section.
+ *
  * @experimental React components are in alpha and subject to change.
  */
 export declare function AccordionItem({ children, expanded, heading, summary, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/react/accordion/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/react/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAc,MAAM,OAAO,CAAA;AAIpE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,GACR,EAAE,kBAAkB,2CAiCpB"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/react/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAc,MAAM,OAAO,CAAA;AAIpE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;IAC5D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;IAC3D;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;CAC1C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,GACR,EAAE,kBAAkB,2CAiCpB"}

package/react/back-link/BackLink.d.ts

@@ -5,7 +5,15 @@ interface BackLinkProps {
     className?: string;
 }
 /**
+ * A back link.
+ *
  * @experimental React components are in alpha and subject to change.
+ *
+ * @example
+ * <BackLink href='/previous-page'>Back</BackLink>
+ *
+ * @example
+ * <BackLink component={Link} to='/previous-page'>Back</BackLink>
  */
 export declare const BackLink: LinkComponent<BackLinkProps>;
 export {};

package/react/back-link/BackLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BackLink.d.ts","sourceRoot":"","sources":["../../../src/react/back-link/BackLink.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAElE,UAAU,aAAa;IACrB,QAAQ,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,aAAa,CAGgE,CAAA"}
+{"version":3,"file":"BackLink.d.ts","sourceRoot":"","sources":["../../../src/react/back-link/BackLink.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAElE,UAAU,aAAa;IACrB,QAAQ,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,aAAa,CAGgE,CAAA"}

package/react/character-count/CharacterCount.d.ts

@@ -0,0 +1,115 @@
+import { type TextareaProps } from '../textarea';
+interface CharacterCountPluralMessage {
+    /**
+     * Message for when the count is exactly 1.
+     */
+    one: string;
+    /**
+     * Message for when the count is not 1.
+     */
+    other: string;
+}
+interface CharacterCountMessageConfig {
+    /**
+     * Message made available to assistive technologies to describe
+     * that the component accepts only a limited amount of content.
+     * It is visible on the page when JavaScript is unavailable. The
+     * component will replace the `%{count}` placeholder with the
+     * value of the `maxLength` or `maxWords` prop.
+     */
+    textareaDescriptionText?: string;
+    /**
+     * Message displayed when the number of characters is under the
+     * configured maximum, `maxLength`. This message is displayed
+     * visually and through assistive technologies. The component
+     * will replace the `%{count}` placeholder with the number of
+     * remaining characters.
+     */
+    charactersUnderLimitText?: Partial<CharacterCountPluralMessage>;
+    /**
+     * Message displayed when the number of characters reaches the
+     * configured maximum, `maxLength`. This message is displayed
+     * visually and through assistive technologies.
+     */
+    charactersAtLimitText?: string;
+    /**
+     * Message displayed when the number of characters is over the
+     * configured maximum, `maxLength`. This message is displayed
+     * visually and through assistive technologies. The component
+     * will replace the `%{count}` placeholder with the number of
+     * characters above the maximum.
+     */
+    charactersOverLimitText?: Partial<CharacterCountPluralMessage>;
+    /**
+     * Message displayed when the number of words is under the
+     * configured maximum, `maxWords`. This message is displayed
+     * visually and through assistive technologies. The component
+     * will replace the `%{count}` placeholder with the number of
+     * remaining words.
+     */
+    wordsUnderLimitText?: Partial<CharacterCountPluralMessage>;
+    /**
+     * Message displayed when the number of words reaches the
+     * configured maximum, `maxWords`. This message is displayed
+     * visually and through assistive technologies.
+     */
+    wordsAtLimitText?: string;
+    /**
+     * Message displayed when the number of words is over the
+     * configured maximum, `maxWords`. This message is displayed
+     * visually and through assistive technologies. The component
+     * will replace the `%{count}` placeholder with the number of
+     * characters above the maximum.
+     */
+    wordsOverLimitText?: Partial<CharacterCountPluralMessage>;
+}
+interface BaseCharacterCountProps extends TextareaProps, CharacterCountMessageConfig {
+    /**
+     * Defines a threshold that must be reached before the
+     * character count message is displayed.
+     * This is a value between 0 and 1, representing a percentage
+     * of `maxLength` or `maxWords`.
+     */
+    threshold?: number;
+    /**
+     * CSS classes to add to the count message.
+     */
+    countMessageClassname?: string;
+}
+interface LengthCharacterCountProps extends BaseCharacterCountProps {
+    /**
+     * The maximum number of characters. Required if `maxWords`
+     * is not set. Cannot be set if `maxWords` is set.
+     */
+    maxLength: number;
+    maxWords?: never;
+}
+interface WordCharacterCountProps extends BaseCharacterCountProps {
+    maxLength?: never;
+    /**
+     * The maximum number of words. Required if `maxLength`
+     * is not set. Cannot be set if `maxLength` is set.
+     */
+    maxWords: number;
+}
+export type CharacterCountProps = LengthCharacterCountProps | WordCharacterCountProps;
+/**
+ * Character count.
+ *
+ * @experimental React components are in alpha and subject to change.
+ *
+ * @example
+ * <CharacterCount
+ *   label={
+ *     <Label className='govuk-label--l' isPageHeading>
+ *       Can you provide more detail?
+ *     </Label>
+ *   }
+ *   hint={<Hint>Do not include personal information like your service number.</Hint>}
+ *   maxLength={200}
+ *   name='with-hint'
+ * />
+ */
+export declare const CharacterCount: import("react").ForwardRefExoticComponent<CharacterCountProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=CharacterCount.d.ts.map

package/react/character-count/CharacterCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterCount.d.ts","sourceRoot":"","sources":["../../../src/react/character-count/CharacterCount.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AA0B1D,UAAU,2BAA2B;IACnC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,2BAA2B;IACnC;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;IAC/D;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;IAC9D;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;IAC1D;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;CAC1D;AAED,UAAU,uBAAwB,SAAQ,aAAa,EAAE,2BAA2B;IAClF;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,UAAU,yBAA0B,SAAQ,uBAAuB;IACjE;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB;AAED,UAAU,uBAAwB,SAAQ,uBAAuB;IAC/D,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GAAG,uBAAuB,CAAA;AAqDrF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,qHAoH1B,CAAA"}

package/react/character-count/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CharacterCount';
+export { useThrottledValue } from './useThrottledValue';
+//# sourceMappingURL=index.d.ts.map

package/react/character-count/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/character-count/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/react/character-count/useThrottledValue.d.ts

@@ -0,0 +1,6 @@
+export declare function useThrottledValue(): {
+    rawValue: string;
+    setValue: (value: string) => void;
+    throttledValue: string;
+};
+//# sourceMappingURL=useThrottledValue.d.ts.map

package/react/character-count/useThrottledValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThrottledValue.d.ts","sourceRoot":"","sources":["../../../src/react/character-count/useThrottledValue.ts"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB;;sBAKM,MAAM;;EAM5C"}

package/react/details/Details.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
+    /**
+     * Content to be displayed when the details element is expanded.
+     */
+    children: ReactNode;
+    /**
+     * Content for the summary element.
+     */
+    summary: ReactNode;
+}
+/**
+ * Details component.
+ *
+ * @experimental React components are in alpha and subject to change.
+ *
+ * @example
+ * <Details summary='Help with organisation'>
+ *   We need to know the organisation you work for so we can forward your request to the correct team.
+ * </Details>
+ */
+export declare const Details: import("react").ForwardRefExoticComponent<DetailsProps & import("react").RefAttributes<HTMLDetailsElement>>;
+//# sourceMappingURL=Details.d.ts.map

package/react/details/Details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/react/details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjF,MAAM,WAAW,YAAa,SAAQ,wBAAwB,CAAC,SAAS,CAAC;IACvE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,6GAanB,CAAA"}

package/react/details/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Details';
+//# sourceMappingURL=index.d.ts.map

package/react/details/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/details/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/react/esm/accordion/Accordion.js

@@ -11,7 +11,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import clsx from 'clsx';
 import { isEqual, pick } from 'lodash';
-import { Children, forwardRef, isValidElement, useMemo, useRef } from 'react';
+import { forwardRef, isValidElement, useMemo, useRef } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 import { mergeRefs } from 'react-merge-refs';
 import { useMODUKComponent } from '../internal/hooks/useMODUKComponent';
@@ -62,6 +62,7 @@ export var Accordion = forwardRef(function (props, forwardedRef) {
     'data-i18n.show-section': showSectionText,
     'data-i18n.show-section-aria-label': showSectionAriaLabelText
   };
+  var flattenedChildren = flattenChildren(children).filter(isValidElement);
   return _jsx(AccordionContext.Provider, {
     value: contextValue,
     children: _jsx("div", _objectSpread(_objectSpread(_objectSpread({
@@ -72,11 +73,11 @@ export var Accordion = forwardRef(function (props, forwardedRef) {
       "data-remember-expanded": rememberExpanded,
       id: id
     }, i18nAttributes), {}, {
-      children: Children.map(children, function (child, index) {
+      children: flattenedChildren.map(function (child, index) {
         return _jsx(AccordionItemIndexContext.Provider, {
           value: index,
           children: child
-        });
+        }, child.key);
       })
     }), key.current)
   });