whitehall-ui 1.0.0

package/package.json

@@ -0,0 +1,263 @@
+{
+  "name": "whitehall-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "GOV.UK Design System component library for React 19 + Tailwind CSS 4. Available as an npm package and a shadcn-compatible registry.",
+  "license": "MIT",
+  "author": "dawidmakos",
+  "homepage": "https://dawidmakos.github.io/whitehall-ui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dawidmakos/whitehall-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dawidmakos/whitehall-ui/issues"
+  },
+  "keywords": [
+    "govuk",
+    "gov.uk",
+    "design-system",
+    "react",
+    "tailwindcss",
+    "shadcn",
+    "components",
+    "ui"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "registry/default/theme/govuk-tokens.css",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./registry/default/theme/govuk-tokens.css",
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./accordion": {
+      "types": "./dist/ui/accordion.d.ts",
+      "import": "./dist/ui/accordion.js"
+    },
+    "./back-link": {
+      "types": "./dist/ui/back-link.d.ts",
+      "import": "./dist/ui/back-link.js"
+    },
+    "./button": {
+      "types": "./dist/ui/button.d.ts",
+      "import": "./dist/ui/button.js"
+    },
+    "./character-count": {
+      "types": "./dist/ui/character-count.d.ts",
+      "import": "./dist/ui/character-count.js"
+    },
+    "./checkboxes": {
+      "types": "./dist/ui/checkboxes.d.ts",
+      "import": "./dist/ui/checkboxes.js"
+    },
+    "./cookie-banner": {
+      "types": "./dist/ui/cookie-banner.d.ts",
+      "import": "./dist/ui/cookie-banner.js"
+    },
+    "./date-input": {
+      "types": "./dist/ui/date-input.d.ts",
+      "import": "./dist/ui/date-input.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/ui/breadcrumbs.d.ts",
+      "import": "./dist/ui/breadcrumbs.js"
+    },
+    "./details": {
+      "types": "./dist/ui/details.d.ts",
+      "import": "./dist/ui/details.js"
+    },
+    "./error-message": {
+      "types": "./dist/ui/error-message.d.ts",
+      "import": "./dist/ui/error-message.js"
+    },
+    "./error-summary": {
+      "types": "./dist/ui/error-summary.d.ts",
+      "import": "./dist/ui/error-summary.js"
+    },
+    "./exit-this-page": {
+      "types": "./dist/ui/exit-this-page.d.ts",
+      "import": "./dist/ui/exit-this-page.js"
+    },
+    "./fieldset": {
+      "types": "./dist/ui/fieldset.d.ts",
+      "import": "./dist/ui/fieldset.js"
+    },
+    "./file-upload": {
+      "types": "./dist/ui/file-upload.d.ts",
+      "import": "./dist/ui/file-upload.js"
+    },
+    "./footer": {
+      "types": "./dist/ui/footer.d.ts",
+      "import": "./dist/ui/footer.js"
+    },
+    "./header": {
+      "types": "./dist/ui/header.d.ts",
+      "import": "./dist/ui/header.js"
+    },
+    "./generic-header": {
+      "types": "./dist/ui/generic-header.d.ts",
+      "import": "./dist/ui/generic-header.js"
+    },
+    "./hint": {
+      "types": "./dist/ui/hint.d.ts",
+      "import": "./dist/ui/hint.js"
+    },
+    "./inset-text": {
+      "types": "./dist/ui/inset-text.d.ts",
+      "import": "./dist/ui/inset-text.js"
+    },
+    "./label": {
+      "types": "./dist/ui/label.d.ts",
+      "import": "./dist/ui/label.js"
+    },
+    "./link": {
+      "types": "./dist/ui/link.d.ts",
+      "import": "./dist/ui/link.js"
+    },
+    "./notification-banner": {
+      "types": "./dist/ui/notification-banner.d.ts",
+      "import": "./dist/ui/notification-banner.js"
+    },
+    "./panel": {
+      "types": "./dist/ui/panel.d.ts",
+      "import": "./dist/ui/panel.js"
+    },
+    "./password-input": {
+      "types": "./dist/ui/password-input.d.ts",
+      "import": "./dist/ui/password-input.js"
+    },
+    "./pagination": {
+      "types": "./dist/ui/pagination.d.ts",
+      "import": "./dist/ui/pagination.js"
+    },
+    "./phase-banner": {
+      "types": "./dist/ui/phase-banner.d.ts",
+      "import": "./dist/ui/phase-banner.js"
+    },
+    "./radios": {
+      "types": "./dist/ui/radios.d.ts",
+      "import": "./dist/ui/radios.js"
+    },
+    "./select": {
+      "types": "./dist/ui/select.d.ts",
+      "import": "./dist/ui/select.js"
+    },
+    "./service-navigation": {
+      "types": "./dist/ui/service-navigation.d.ts",
+      "import": "./dist/ui/service-navigation.js"
+    },
+    "./skip-link": {
+      "types": "./dist/ui/skip-link.d.ts",
+      "import": "./dist/ui/skip-link.js"
+    },
+    "./tag": {
+      "types": "./dist/ui/tag.d.ts",
+      "import": "./dist/ui/tag.js"
+    },
+    "./tabs": {
+      "types": "./dist/ui/tabs.d.ts",
+      "import": "./dist/ui/tabs.js"
+    },
+    "./table": {
+      "types": "./dist/ui/table.d.ts",
+      "import": "./dist/ui/table.js"
+    },
+    "./task-list": {
+      "types": "./dist/ui/task-list.d.ts",
+      "import": "./dist/ui/task-list.js"
+    },
+    "./text-input": {
+      "types": "./dist/ui/text-input.d.ts",
+      "import": "./dist/ui/text-input.js"
+    },
+    "./textarea": {
+      "types": "./dist/ui/textarea.d.ts",
+      "import": "./dist/ui/textarea.js"
+    },
+    "./warning-text": {
+      "types": "./dist/ui/warning-text.d.ts",
+      "import": "./dist/ui/warning-text.js"
+    },
+    "./summary-list": {
+      "types": "./dist/ui/summary-list.d.ts",
+      "import": "./dist/ui/summary-list.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsup",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "registry:build": "node scripts/build-registry.mjs",
+    "prepublishOnly": "npm run build:lib",
+    "test": "vitest --project=storybook"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@base-ui/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.3.2",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.2",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.4.6",
+    "globals": "^16.5.0",
+    "playwright": "^1.61.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "storybook": "^10.4.6",
+    "tailwindcss": "^4.2.1",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.62.1",
+    "vite": "^7.3.6",
+    "vitest": "^4.0.18"
+  }
+}

package/registry/default/theme/govuk-tokens.css

@@ -0,0 +1,434 @@
+/* ---------------------------------------------------------------------------
+ * Whitehall-UI – Design Tokens (based on GOV.UK Design System)
+ * https://design-system.service.gov.uk/styles/colour/
+ *
+ * Defined as Tailwind 4 @theme variables so they generate real utility
+ * classes: bg-govuk-green, text-govuk-black, shadow-govuk-green, etc.
+ *
+ * Consumers: import this file in your main CSS entry point AFTER
+ * `@import "tailwindcss"`:
+ *
+ *   @import "tailwindcss";
+ *   @import "@/theme/govuk-tokens.css";
+ *
+ * ------------------------------------------------------------------------- */
+
+@theme {
+  /* Font */
+  --font-govuk: Arial, Helvetica, sans-serif;
+
+  --color-govuk-brand: #1d70b8;
+  --color-govuk-brand-hover: #003078;
+  --color-govuk-visited: #4c2c92;
+  --color-govuk-green: #0f7a52;
+  --color-govuk-green-hover: #0b5c3e;
+  --color-govuk-green-shadow: #083d29;
+  --color-govuk-black: #0b0c0c;
+  --color-govuk-light-grey: #f3f3f3;
+  --color-govuk-light-grey-shadow: #858686;
+  --color-govuk-grey: #cecece;
+  --color-govuk-mid-grey: #b1b4b6;
+  --color-govuk-dark-grey: #505a5f;
+  --color-govuk-red: #ca3535;
+  --color-govuk-red-hover: #982828;
+  --color-govuk-red-shadow: #651b1b;
+  --color-govuk-inverse-hover: #f4f8fb;
+  --color-govuk-inverse-shadow: #0f385c;
+  --color-govuk-yellow: #ffdd00;
+
+  /* Error */
+  --color-govuk-error: #d4351c;
+  --color-govuk-error-hover: #6a1b0e;
+
+  /* Tag colours */
+  --color-govuk-tag-blue: #0f385c;
+  --color-govuk-tag-blue-bg: #d2e2f1;
+  --color-govuk-tag-green: #083d29;
+  --color-govuk-tag-green-bg: #cfe4dc;
+  --color-govuk-tag-teal: #0b4144;
+  --color-govuk-tag-teal-bg: #d0e6e7;
+  --color-govuk-tag-purple: #2a1950;
+  --color-govuk-tag-purple-bg: #ddd6ec;
+  --color-govuk-tag-magenta: #651b3e;
+  --color-govuk-tag-magenta-bg: #f4d7e5;
+  --color-govuk-tag-red: #651b1b;
+  --color-govuk-tag-red-bg: #f4d7d7;
+  --color-govuk-tag-orange: #7a3c1c;
+  --color-govuk-tag-orange-bg: #fde4d7;
+  --color-govuk-tag-yellow: #7a3c1c;
+  --color-govuk-tag-yellow-bg: #ffee80;
+
+  /* Typography */
+  --text-govuk-header: 16px;
+  --text-govuk-header--line-height: 1;
+  --text-govuk-header-link: 30px;
+  --text-govuk-header-link--line-height: 1;
+  --text-govuk-body: 19px;
+  --text-govuk-body--line-height: 25px;
+  --text-govuk-tag: 19px;
+  --text-govuk-tag--line-height: 25px;
+  --text-govuk-start: 24px;
+  --text-govuk-start--line-height: 1;
+  --text-govuk-heading-xl: 48px;
+  --text-govuk-heading-xl--line-height: 50px;
+  --text-govuk-heading-l: 36px;
+  --text-govuk-heading-l--line-height: 40px;
+  --text-govuk-heading-m: 24px;
+  --text-govuk-heading-m--line-height: 25px;
+  --text-govuk-warning-icon: 30px;
+  --text-govuk-warning-icon--line-height: 29px;
+  --text-govuk-phase-banner: 16px;
+  --text-govuk-phase-banner--line-height: 1.25;
+
+  /* Border radius */
+  --radius-govuk-tag: 1px;
+
+  /* Spacing – GOV.UK uses px-based non-standard spacing values */
+  --spacing-govuk-1: 5px;
+  --spacing-govuk-2: 10px;
+  --spacing-govuk-3: 15px;
+  --spacing-govuk-4: 20px;
+  --spacing-govuk-5: 25px;
+  --spacing-govuk-6: 30px;
+  --spacing-govuk-7: 40px;
+  --spacing-govuk-8: 50px;
+  --spacing-govuk-button-x: 10px;
+  --spacing-govuk-button-pt: 8px;
+  --spacing-govuk-button-pb: 7px;
+  --spacing-govuk-button-bottom: 18px;
+  --spacing-govuk-button-press: 2px;
+
+  /* File upload (improved / JS-enhanced) */
+  --spacing-govuk-file-upload: 18px;
+  --spacing-govuk-file-upload-lg: 23px;
+  --spacing-govuk-file-upload-pseudo-mb: 3px;
+  --spacing-govuk-file-upload-instruction-mt: 7px;
+  --color-govuk-file-upload-hover-border: #6f777b;
+
+  /* Exit this page */
+  --z-index-govuk-exit-page: 1000;
+  --z-index-govuk-exit-page-overlay: 9999;
+  --spacing-govuk-exit-page-dot: 0.75em;
+  --spacing-govuk-exit-page-dot-gap: 0.125em;
+  --border-width-govuk-exit-page-dot: 0.375em;
+  --color-govuk-canvas: Canvas;
+  --color-govuk-canvas-text: CanvasText;
+
+  /* Border widths – GOV.UK uses non-standard border widths */
+  --border-width-govuk-standard: 5px;
+  --border-width-govuk-wide: 10px;
+
+  /* Warning Text */
+  --spacing-govuk-warning-icon-size: 35px;
+  --spacing-govuk-warning-text-pl: 45px;
+  --spacing-govuk-warning-icon-mt: -7px;
+  --spacing-govuk-warning-icon-border: 3px;
+
+  /* Radios & Checkboxes */
+  --spacing-govuk-radio-size: 40px;
+  --spacing-govuk-radio-touch-target: 44px;
+  --spacing-govuk-radio-small-size: 24px;
+  --spacing-govuk-radio-dot: 10px;
+  --spacing-govuk-radio-small-dot: 5px;
+  --spacing-govuk-radio-label-padding-x: 15px;
+  --spacing-govuk-radio-focus-width: 4px;
+  --spacing-govuk-radio-gutter: 4px;
+  --spacing-govuk-checkbox-size: 40px;
+  --spacing-govuk-checkbox-touch-target: 44px;
+  --spacing-govuk-checkbox-label-padding-x: 15px;
+  --spacing-govuk-checkbox-label-padding-y: 7px;
+  --spacing-govuk-checkbox-focus-width: 3px;
+  --spacing-govuk-checkbox-gutter: 4px;
+  --spacing-govuk-checkbox-check-width: 23px;
+  --spacing-govuk-checkbox-check-height: 12px;
+  --spacing-govuk-checkbox-check-top: 13px;
+  --spacing-govuk-checkbox-check-left: 10px;
+  --spacing-govuk-checkbox-check-stroke: 5px;
+  --spacing-govuk-checkbox-small-size: 24px;
+  --spacing-govuk-checkbox-small-box-offset: 10px;
+  --spacing-govuk-checkbox-small-check-top: 17px;
+  --spacing-govuk-checkbox-small-check-left: 16px;
+  --spacing-govuk-checkbox-small-check-width: 12px;
+  --spacing-govuk-checkbox-small-check-height: 6.5px;
+  --spacing-govuk-checkbox-small-check-stroke: 3px;
+  --spacing-govuk-checkbox-conditional-ml: 21px;
+  --spacing-govuk-checkbox-conditional-pl: 36px;
+  --spacing-govuk-hover-width: 10px;
+
+  /* Tag padding */
+  --spacing-govuk-tag-x: 8px;
+  --spacing-govuk-tag-pt: 2px;
+  --spacing-govuk-tag-pb: 3px;
+  --spacing-govuk-tag-mt: -2px;
+  --spacing-govuk-tag-mb: -3px;
+  --spacing-govuk-tag-max-width: 160px;
+
+  /* Fixed input widths – em-based, include extra padding for browser icons */
+  --spacing-govuk-input-width-30: 29.5em;
+  --spacing-govuk-input-width-20: 20.5em;
+  --spacing-govuk-input-width-10: 11.5em;
+  --spacing-govuk-input-width-5: 5.5em;
+  --spacing-govuk-input-width-4: 4.5em;
+  --spacing-govuk-input-width-3: 3.75em;
+  --spacing-govuk-input-width-2: 2.75em;
+
+  --spacing-govuk-select-item-px: 7px;
+
+  /* Pagination */
+  --spacing-govuk-pagination-touch: 45px;
+
+  /* Header */
+  --spacing-govuk-header-link-underline: 3px;
+
+  /* Letter spacing – extra spacing for codes and reference numbers */
+  --tracking-govuk-code: 0.05em;
+
+  /* Shadows – bottom edge shadows used across buttons, tags, etc. */
+  --shadow-govuk-green: 0 2px 0 #083d29;
+  --shadow-govuk-light-grey: 0 2px 0 #858686;
+  --shadow-govuk-red: 0 2px 0 #651b1b;
+  --shadow-govuk-inverse: 0 2px 0 #0f385c;
+  --shadow-govuk-yellow: 0 2px 0 #0b0c0c;
+  --shadow-govuk-clear: 0 0 #0000;
+}
+
+/* Custom utilities – for styles that can’t be expressed via @theme namespaces */
+@utility border-l-govuk-inset {
+  border-left: var(--border-width-govuk-wide) solid var(--color-govuk-grey);
+}
+
+@utility govuk-checkmark {
+  border-style: solid;
+  border-color: currentcolor;
+  border-width: 0 0 var(--spacing-govuk-checkbox-check-stroke)
+    var(--spacing-govuk-checkbox-check-stroke);
+  border-top-color: transparent;
+  transform: rotate(-45deg);
+  background: transparent;
+}
+
+@utility govuk-checkbox-composed-shadow {
+  box-shadow:
+    var(--govuk-cb-focus-shadow, 0 0 #0000),
+    var(--govuk-cb-hover-shadow, 0 0 #0000);
+}
+
+@utility govuk-checkbox-focus-shadow {
+  --govuk-cb-focus-shadow: 0 0 0 var(--spacing-govuk-checkbox-focus-width)
+    var(--color-govuk-yellow);
+}
+
+@utility govuk-checkbox-small-hover {
+  --govuk-cb-hover-shadow: 0 0 0 var(--spacing-govuk-hover-width)
+    var(--color-govuk-mid-grey);
+  outline: var(--spacing-govuk-checkbox-focus-width) dashed transparent;
+  outline-offset: 1px;
+}
+
+@utility govuk-checkmark-small {
+  border-style: solid;
+  border-color: currentcolor;
+  border-width: 0 0 var(--spacing-govuk-checkbox-small-check-stroke)
+    var(--spacing-govuk-checkbox-small-check-stroke);
+  border-top-color: transparent;
+  transform: rotate(-45deg);
+  background: transparent;
+}
+
+@utility min-w-anchor {
+  min-width: var(--anchor-width);
+}
+
+@utility w-anchor {
+  width: var(--anchor-width);
+}
+
+@utility govuk-link-focus {
+  outline: 3px solid transparent;
+  color: var(--color-govuk-black);
+  background-color: var(--color-govuk-yellow);
+  box-shadow:
+    0 -2px var(--color-govuk-yellow),
+    0 4px var(--color-govuk-black);
+  text-decoration: none;
+}
+
+@utility border-govuk-error-summary {
+  border: var(--border-width-govuk-standard) solid var(--color-govuk-error);
+}
+
+@utility border-govuk-notification-banner {
+  border: var(--border-width-govuk-standard) solid var(--color-govuk-brand);
+}
+
+@utility border-govuk-notification-banner-success {
+  border: var(--border-width-govuk-standard) solid var(--color-govuk-green);
+}
+
+@utility govuk-link-underline {
+  text-underline-offset: 0.1578em;
+  text-decoration-thickness: max(1px, 0.0625rem);
+}
+
+@utility govuk-link-underline-hover {
+  text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+  text-decoration-skip-ink: none;
+  text-decoration-skip: none;
+}
+
+@utility govuk-skip-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+    z-index: 50;
+    outline: 3px solid var(--color-govuk-yellow);
+    outline-offset: 0;
+    background-color: var(--color-govuk-yellow);
+  }
+}
+
+@utility govuk-tab {
+  &[data-active] {
+    margin-top: calc(-1 * var(--spacing-govuk-1));
+    margin-bottom: -1px;
+    padding-top: 14px;
+    padding-right: 19px;
+    padding-bottom: 16px;
+    padding-left: 19px;
+    border: 1px solid var(--color-govuk-mid-grey);
+    border-bottom: 0;
+    background-color: #fff;
+  }
+}
+
+@utility govuk-tab-panel-border {
+  border: 1px solid var(--color-govuk-mid-grey);
+  border-top: 0;
+}
+
+@utility govuk-accordion-button-border {
+  border: 0;
+  border-top: 1px solid var(--color-govuk-mid-grey);
+}
+
+@utility govuk-accordion-chevron {
+  vertical-align: middle;
+}
+
+@utility govuk-table-cell {
+  padding: var(--spacing-govuk-2) var(--spacing-govuk-4) var(--spacing-govuk-2)
+    0;
+  border-bottom: 1px solid var(--color-govuk-mid-grey);
+  text-align: left;
+  vertical-align: top;
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+@utility govuk-pagination-nav-item {
+  &:hover {
+    background-color: #f3f2f1;
+  }
+}
+
+@utility govuk-pagination-item-current {
+  outline: 1px solid transparent;
+  background-color: var(--color-govuk-brand);
+
+  &:hover {
+    background-color: var(--color-govuk-brand);
+  }
+
+  & a,
+  & a:link,
+  & a:visited,
+  & a:hover,
+  & a:active {
+    color: white;
+  }
+}
+
+@utility govuk-pagination-link {
+  @media screen {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+
+@utility govuk-pagination-icon {
+  width: 0.9375rem;
+  height: 0.8125rem;
+  color: var(--color-govuk-dark-grey);
+}
+
+@utility govuk-pagination-nav-link {
+  & > a {
+    display: flex;
+    align-items: center;
+  }
+}
+
+@utility govuk-pagination-block {
+  display: block;
+
+  & > div + div {
+    border-top: 1px solid var(--color-govuk-mid-grey);
+  }
+}
+
+@utility govuk-pagination-block-link {
+  &:not(:focus) {
+    text-decoration: none;
+  }
+}
+
+@utility govuk-pagination-block-title {
+  &::after {
+    content: '';
+    display: block;
+  }
+}
+
+@utility govuk-pagination-block-arrow {
+  margin-top: 0.326em;
+  margin-left: calc(var(--spacing-govuk-6) * -1);
+  float: left;
+}
+
+@utility govuk-date-input {
+  font-size: 0;
+
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+@utility govuk-date-input-field {
+  margin-bottom: 0;
+}