@raspberrypifoundation/design-system-react 1.6.0 → 2.0.0-beta.1

package/dist/scss/components/table/table-cell.scss

@@ -0,0 +1,82 @@
+.rpf-table-cell {
+  border-bottom: var(--table-border-width) solid var(--rpf-grey-100);
+
+  & > * {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--space-1);
+    line-height: var(--line-height-1-5);
+    padding-block: var(--space-1);
+    padding-inline: var(--space-2);
+  }
+
+  &--header {
+    background-color: var(--rpf-grey-50);
+
+    & > * {
+      min-height: var(--space-7);
+      min-width: var(--space-7);
+    }
+  }
+
+  &--sortable-header {
+    @extend .rpf-table-cell--header;
+
+    .rpf-table-cell__sort-header {
+      display: flex;
+      width: 100%;
+      gap: var(--space-1);
+      min-height: var(--min-target-size);
+      align-items: center;
+      border-radius: var(--border-radius);
+
+      &:focus-visible {
+        outline: 2px solid var(--rpf-raspberry-800);
+        outline-offset: 3px;
+      }
+    }
+
+    // disable all default button styles
+    button {
+      all: unset;
+      cursor: pointer;
+    }
+
+    // disable necessary default link styles
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  &--body {
+    background-color: var(--rpf-white);
+
+    .rpf-table-cell__content {
+      min-height: var(--space-8);
+      min-width: var(--space-8);
+
+      & > * {
+        margin-block: auto;
+      }
+
+      a {
+        color: var(--rpf-brand-500);
+        font-weight: var(--font-weight-bold);
+      }
+
+      &:has(> .rpf-button) {
+        justify-content: end;
+        padding: var(--space-1);
+      }
+
+      &--truncated {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/dist/scss/components/table/table.scss

@@ -0,0 +1,32 @@
+.rpf-table{
+  border: 1px solid var(--rpf-grey-100);
+  border-radius: var(--border-radius);
+  overflow: auto;
+  // overflow-x: scroll;
+  top: 0;
+  // max-width: 600px;
+  width: fit-content;
+  
+  &--full-width {
+    width: 100%;
+  }
+
+
+  &__table {
+    border-collapse: collapse;
+    // min-width: 100%;
+    width: max-content;
+
+    &--full-width {
+      width: 100%;
+    }
+
+    thead th,
+    thead td {
+      // make header row sticky
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+}

package/dist/scss/components/tag.scss

@@ -0,0 +1,50 @@
+@forward '../properties/font-weight';
+@forward '../properties/spacing';
+
+@mixin rpf-tag-variant($variant) {
+  background-color: var(--rpf-alert-#{$variant});
+  border-color: var(--rpf-alert-#{$variant});
+}
+
+@mixin rpf-tag-secondary-variant($variant) {
+  border-color: var(--rpf-alert-#{$variant});
+  color: var(--rpf-alert-#{$variant});
+}
+
+.rpf-tag {
+  --tag-color: var(--rpf-text-primary);
+  --tag-color-secondary: color-mix(in srgb, var(--tag-color), white 95%);
+  --tag-text-color: var(--rpf-white);
+  --tag-text-color-secondary: var(--tag-color);
+  
+  align-items: center;
+  border: solid 1px var(--tag-color);
+  background-color: var(--tag-color);
+  border-radius: 2rem;
+  color: var(--tag-text-color);
+  display: flex;
+  font-weight: var(--font-weight-bold);
+  gap: var(--space-0-5);
+  line-height: 1.5rem;
+  padding: var(--space-0-5) var(--space-1);
+  inline-size: max-content;
+  
+  $variants: information, success, warning, error;
+  
+  @each $variant in $variants {
+    &--#{$variant} {
+      @include rpf-tag-variant($variant);
+    }
+  }
+  
+  &--secondary {
+    background-color: var(--tag-color-secondary);
+    color: var(--tag-text-color-secondary);
+    
+    @each $variant in $variants {
+      &.rpf-tag--#{$variant} {
+        @include rpf-tag-secondary-variant($variant);
+      }
+    }
+  }
+}

package/dist/scss/design-system-core.scss

@@ -0,0 +1,37 @@
+@use 'properties/_border';
+@use 'properties/_font-size';
+@use 'properties/_font-weight';
+@use 'properties/_line-height';
+@use 'properties/_spacing';
+@use 'properties/_shadows';
+@use 'properties/colors/_alert' as alert_colors;
+@use 'properties/colors/_brand';
+@use 'properties/colors/_decorative';
+@use 'properties/colors/_greys';
+@use 'properties/colors/_inputs' as inputs_colors;
+@use 'properties/colors/_text';
+
+@use 'components/alert';
+@use 'components/accordion';
+@use 'components/button';
+@use 'components/progress-bar';
+@use 'components/squiggle';
+@use 'components/tag';
+@use 'components/menu';
+@use 'components/link';
+@use 'components/burger-menu';
+
+@use 'components/forms/error-message';
+@use 'components/forms/fieldset';
+@use 'components/forms/inputs';
+@use 'components/forms/input-checkbox';
+@use 'components/forms/input-label';
+@use 'components/forms/input-radio';
+@use 'components/forms/input-select';
+@use 'components/forms/input-text';
+@use 'components/forms/input-textarea';
+@use 'components/forms/input-search';
+@use 'components/forms/input-password';
+
+@use 'components/table/table';
+@use 'components/table/table-cell';

package/dist/scss/mixins/_inputs.scss

@@ -0,0 +1,19 @@
+@forward '../properties/colors/inputs';
+
+@mixin readonly {
+  &:read-only,
+  &--read-only,
+  &--readonly {
+    border-color: var(--rpf-input-background-color-readonly);
+    background-color: var(--rpf-input-background-color-readonly);
+  }
+}
+
+@mixin disabled {
+  &:disabled,
+  &--disabled {
+    border-color: var(--rpf-input-background-color-disabled);
+    background-color: var(--rpf-input-background-color-disabled);
+  }
+}
+

package/dist/scss/mixins/_typography.scss

@@ -0,0 +1,75 @@
+@forward '../properties/font-size';
+@forward '../properties/font-weight';
+@forward '../properties/line-height';
+
+@mixin style-0-5($weight: regular) {
+  font-size: var(--font-size-0-5);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-0-75);
+}
+
+@mixin style-0-75($weight: regular) {
+  font-size: var(--font-size-0-75);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-1);
+}
+
+@mixin style-1($weight: regular) {
+  font-size: var(--font-size-1);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-1-5);
+}
+
+@mixin style-1-5($weight: regular) {
+  font-size: var(--font-size-1-5);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-1-5);
+}
+
+@mixin style-2($weight: regular) {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-2);
+}
+
+@mixin style-3($weight: regular) {
+  font-size: var(--font-size-3);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-2-5);
+}
+
+@mixin style-4($weight: regular) {
+  font-size: var(--font-size-4);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-3-5);
+}
+
+@mixin style-5($weight: regular) {
+  font-size: var(--font-size-5);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-4);
+}
+
+@mixin style-6($weight: regular) {
+  font-size: var(--font-size-6);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-4-5);
+}
+
+@mixin style-7($weight: regular) {
+  font-size: var(--font-size-7);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-5);
+}
+
+@mixin style-8($weight: regular) {
+  font-size: var(--font-size-8);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-6);
+}
+
+@mixin style-9($weight: regular) {
+  font-size: var(--font-size-9);
+  font-weight: var(--font-weight-#{$weight});
+  line-height: var(--line-height-6-5);
+}

package/dist/scss/properties/_border.scss

@@ -0,0 +1,13 @@
+:root, :host {
+  --border-radius: var(--space-1);
+  --border-radius-sm: var(--space-0-5);
+  --border-width-sm: 1px;
+  --border-width-md: 2px;
+  --border-width-lg: 3px;
+
+  --alert-border-width: var(--border-width-md);
+  --fieldset-border-width: var(--border-width-md);
+  --input-border-width: var(--border-width-md);
+
+  --table-border-width: var(--border-width-sm);
+}

package/dist/scss/properties/_font-size.scss

@@ -0,0 +1,14 @@
+:root, :host {
+  --font-size-0-5: 0.5rem;
+  --font-size-0-75: 0.75rem;
+  --font-size-1: 1rem;
+  --font-size-1-5: 1.25rem;
+  --font-size-2: 1.5rem;
+  --font-size-3: 2rem;
+  --font-size-4: 2.5rem;
+  --font-size-5: 3rem;
+  --font-size-6: 3.5rem;
+  --font-size-7: 4rem;
+  --font-size-8: 4.5rem;
+  --font-size-9: 5rem;
+}

package/dist/scss/properties/_font-weight.scss

@@ -0,0 +1,4 @@
+:root, :host {
+  --font-weight-regular: 400;
+  --font-weight-bold: 700;
+}

package/dist/scss/properties/_line-height.scss

@@ -0,0 +1,15 @@
+:root, :host {
+  --line-height-0-75: 0.75rem;
+  --line-height-1:    1rem;
+  --line-height-1-5:  1.5rem;
+  --line-height-2:    2rem;
+  --line-height-2-5:  2.5rem;
+  --line-height-3:    3rem;
+  --line-height-3-5:  3.5rem;
+  --line-height-4:    4rem;
+  --line-height-4-5:  4.5rem;
+  --line-height-5:    5rem;
+  --line-height-5-5:  5.5rem;
+  --line-height-6:    6rem;
+  --line-height-6-5:  6.5rem;
+}

package/dist/scss/properties/_shadows.scss

@@ -0,0 +1,7 @@
+:root,
+:host {
+  // To be used with box-shadow
+  --rpf-shadow-top: 0px -12px 24px 0px rgba(0, 0, 0, 0.04);
+  --rpf-shadow-centre: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+  --rpf-shadow-bottom: 0px 12px 24px 0px rgba(0, 0, 0, 0.04);
+}

package/dist/scss/properties/_sizing.scss

@@ -0,0 +1,6 @@
+:root, :host {
+  /* 44px min-height to meet WCAG AAA target size requirements */
+  --min-target-size: 44px;
+  --sm-target-size: 32px;
+  --lg-target-size: 48px;
+}

package/dist/scss/properties/_spacing.scss

@@ -0,0 +1,16 @@
+:root, :host {
+  --space-0-125: 0.0625rem;
+  --space-0-25: 0.125rem;
+  --space-0-5: 0.25rem;
+  --space-1: 0.5rem;
+  --space-1-5: 0.75rem;
+  --space-2: 1rem;
+  --space-3: 1.5rem;
+  --space-4: 2rem;
+  --space-5: 2.5rem;
+  --space-6: 3rem;
+  --space-7: 3.5rem;
+  --space-8: 4rem;
+  --space-9: 4.5rem;
+  --space-10: 5rem;
+}

package/dist/scss/properties/colors/_alert.scss

@@ -0,0 +1,10 @@
+:root, :host {
+	--rpf-alert-error-highlight:       hsla(0, 88%, 99%, 1);
+	--rpf-alert-error:                 hsla(0, 88%, 33%, 1);
+	--rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);
+	--rpf-alert-information:           hsla(225, 64%, 33%, 1);
+	--rpf-alert-success-highlight:     hsla(136, 90%, 99%, 1);
+	--rpf-alert-success:               hsla(136, 90%, 20%, 1);
+	--rpf-alert-warning-highlight:     hsla(26, 70%, 99%, 1);
+	--rpf-alert-warning:               hsla(26, 70%, 29%, 1);
+}

package/dist/scss/properties/colors/_brand.scss

@@ -0,0 +1,14 @@
+:root, :host {
+	--rpf-brand-black:      hsla(60, 4%, 11%, 1);
+	--rpf-brand-leaf:       hsla(123, 43%, 48%, 1);
+  --rpf-brand-raspberry:  hsla(342, 71%, 47%, 1);
+
+  --rpf-raspberry-50: hsla(338, 57%, 97%, 1);
+  --rpf-raspberry-100: hsla(342, 62%, 96%, 1);
+  --rpf-raspberry-200: hsla(344, 73%, 93%, 1);
+  --rpf-raspberry-400: hsla(341, 63%, 84%, 1);
+  --rpf-raspberry-500: hsla(343, 62%, 68%, 1);
+  --rpf-raspberry-600: hsla(343, 64%, 58%, 1);
+  --rpf-raspberry-800: hsla(342, 71%, 47%, 1);
+  --rpf-raspberry-900: hsla(340, 78%, 36%, 1);
+}

package/dist/scss/properties/colors/_decorative.scss

@@ -0,0 +1,58 @@
+:root, :host {
+  --rpf-red-100: hsla(4, 89%, 96%, 1);
+  --rpf-red-200: hsla(1, 87%, 91%, 1);
+  --rpf-red-400: hsla(1, 87%, 82%, 1);
+  --rpf-red-600: hsla(1, 87%, 72%, 1);
+  --rpf-red-800: hsla(1, 87%, 63%, 1);
+  --rpf-red-900: hsla(1, 52%, 50%, 1);
+
+  --rpf-green-100: hsla(125, 41%, 95%, 1);
+  --rpf-green-200: hsla(122, 39%, 87%, 1);
+  --rpf-green-400: hsla(123, 40%, 74%, 1);
+  --rpf-green-600: hsla(123, 40%, 61%, 1);
+  --rpf-green-800: hsla(123, 43%, 48%, 1);
+  --rpf-green-900: hsla(123, 43%, 34%, 1);
+
+  --rpf-teal-100: hsla(176, 55%, 94%, 1);
+  --rpf-teal-200: hsla(174, 55%, 85%, 1);
+  --rpf-teal-400: hsla(174, 55%, 70%, 1);
+  --rpf-teal-600: hsla(174, 56%, 56%, 1);
+  --rpf-teal-800: hsla(174, 81%, 41%, 1);
+  --rpf-teal-900: hsla(174, 81%, 27%, 1);
+  --rpf-teal-950: hsla(174, 80%, 20%, 1);
+
+  --rpf-orange-100: hsla(31, 100%, 95%, 1);
+  --rpf-orange-200: hsla(32, 100%, 88%, 1);
+  --rpf-orange-400: hsla(31, 100%, 77%, 1);
+  --rpf-orange-600: hsla(31, 99%, 65%, 1);
+  --rpf-orange-800: hsla(31, 99%, 54%, 1);
+  --rpf-orange-900: hsla(31, 85%, 35%, 1);
+
+  --rpf-yellow-100: hsla(51, 100%, 95%, 1);
+  --rpf-yellow-200: hsla(52, 100%, 87%, 1);
+  --rpf-yellow-400: hsla(51, 100%, 75%, 1);
+  --rpf-yellow-600: hsla(52, 100%, 63%, 1);
+  --rpf-yellow-800: hsla(52, 100%, 50%, 1);
+  --rpf-yellow-900: hsla(52, 100%, 26%, 1);
+
+  --rpf-purple-100: hsla(282, 36%, 95%, 1);
+  --rpf-purple-200: hsla(279, 38%, 87%, 1);
+  --rpf-purple-400: hsla(279, 38%, 73%, 1);
+  --rpf-purple-600: hsla(279, 37%, 60%, 1);
+  --rpf-purple-800: hsla(279, 43%, 47%, 1);
+  --rpf-purple-900: hsla(280, 43%, 37%, 1);
+
+  --rpf-navy-100: hsla(235, 38%, 94%, 1);
+  --rpf-navy-200: hsla(234, 38%, 84%, 1);
+  --rpf-navy-400: hsla(235, 38%, 69%, 1);
+  --rpf-navy-600: hsla(235, 38%, 53%, 1);
+  --rpf-navy-800: hsla(235, 63%, 37%, 1);
+  --rpf-navy-900: hsla(234, 63%, 30%, 1);
+
+  --rpf-blue-100: hsla(203, 86%, 95%, 1);
+  --rpf-blue-200: hsla(204, 88%, 87%, 1);
+  --rpf-blue-400: hsla(204, 88%, 74%, 1);
+  --rpf-blue-600: hsla(204, 89%, 60%, 1);
+  --rpf-blue-800: hsla(204, 100%, 47%, 1);
+  --rpf-blue-900: hsla(204, 99%, 37%, 1);
+}

package/dist/scss/properties/colors/_greys.scss

@@ -0,0 +1,18 @@
+:root, :host {
+  --rpf-white:      hsla(0, 0%, 100%, 1);
+  --rpf-off-white:  hsla(225, 25%, 97%, 1);
+  --rpf-grey-50:    hsla(210, 8%, 95%, 1);
+  --rpf-grey-100:   hsla(228, 10%, 90%, 1);
+  --rpf-grey-150:   hsla(223, 9%, 85%, 1);
+  --rpf-grey-200:   hsla(228, 10%, 80%, 1);
+  --rpf-grey-300:   hsla(229, 9%, 75%, 1);
+  --rpf-grey-400:   hsla(229, 8%, 61%, 1);
+  --rpf-grey-500:   hsla(229, 9%, 42%, 1);
+  --rpf-grey-600:   hsla(228, 9%, 32%, 1);
+  --rpf-grey-700:   hsla(228, 9%, 22%, 1);
+  --rpf-grey-800:   hsla(232, 9%, 18%, 1);
+  --rpf-grey-850:   hsla(228, 9%, 15%, 1);
+  --rpf-grey-900:   hsla(228, 9%, 10%, 1);
+  --rpf-grey-950:   hsla(228, 8%, 5%, 1);
+  --rpf-black:      hsla(0, 0%, 0%, 1);
+}

package/dist/scss/properties/colors/_inputs.scss

@@ -0,0 +1,13 @@
+@forward 'alert';
+@forward 'greys';
+@forward 'decorative';
+@forward 'text';
+
+:root, :host {
+  --rpf-input-background-color: var(--rpf-white);
+  --rpf-input-background-color-disabled: var(--rpf-grey-50);
+  --rpf-input-background-color-readonly: var(--rpf-grey-50);
+  --rpf-input-color-error: var(--rpf-alert-error);
+  --rpf-input-color: var(--rpf-text-primary);
+  --rpf-input-outline-color: var(--rpf-blue-800);
+}

package/dist/scss/properties/colors/_text.scss

@@ -0,0 +1,7 @@
+:root, :host {
+  --rpf-text-primary:             hsla(0, 0%, 13%, 1);
+	--rpf-text-primary-darkmode:    var(--rpf-white);
+  --rpf-text-secondary:           hsla(200, 9%, 33%, 1);
+  --rpf-text-secondary-darkmode:  hsla(0, 0%, 80%, 1);
+  --rpf-link-text: var(--rpf-navy-800);
+}

package/package.json

@@ -1,100 +1,75 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
-  "packageManager": "yarn@4.5.0",
-  "version": "1.6.0",
-  "description": "",
+  "version": "2.0.0-beta.1",
   "type": "module",
-  "exports": {
-    "import": "./dist/esm/bundle.js",
-    "require": "./dist/cjs/bundle.js"
-  },
+  "main": "./dist/rpf-design-system-react.umd.cjs",
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build-css": "sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core --quiet src:src",
-    "build-storybook": "npm install && npm run build-css && storybook build",
-    "lint": "eslint \"src/**/*.{js,jsx,json}\"",
-    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,json}\"",
-    "rollup": "npm run build-css && rollup -c",
-    "storybook": "npm run watch-css & storybook dev -p 6006",
-    "test": "jest",
-    "watch-css": "npm run build-css && sass --load-path=./ --load-path=./node_modules/@raspberrypifoundation/design-system-core -q --watch src:src"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/node_modules/@testing-library/jest-dom"
-    ],
-    "testEnvironment": "jsdom",
-    "moduleNameMapper": {
-      "material-symbols": "<rootDir>/mocks/material-symbols.js",
-      "\\.(css|scss)$": "identity-obj-proxy"
+  "exports": {
+    ".": {
+      "import": "./dist/rpf-design-system-react.js",
+      "require": "./dist/rpf-design-system-react.umd.cjs"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/RaspberryPiFoundation/design-system-react.git"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "",
-  "devDependencies": {
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.18.6",
-    "@newhighsco/storybook-addon-svgr": "^1.0.1",
-    "@raspberrypifoundation/design-system-core": "^1.4.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.2",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-mdx-gfm": "^7.4.0",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.2",
-    "babel-eslint": "^10.1.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.9.2",
-    "eslint-webpack-plugin": "^2.5.2",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-github-actions-reporter": "^1.0.3",
-    "jest-junit": "^14.0.1",
-    "jsdom": "^24.0.0",
-    "prettier": "^2.8.8",
-    "rollup": "^3.26.1",
-    "rollup-plugin-postcss": "^4.0.0",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
-    "storybook": "^7.4.0",
-    "storybook-addon-pseudo-states": "^2.1.2",
-    "storybook-addon-sass-postcss": "^0.1.3"
+  "scripts": {
+    "dev": "vite",
+    "build": "yarn run build-core-scss && vite build",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-core-scss": "rm -r public/scss/* && cp -R node_modules/@raspberrypifoundation/design-system-core/scss/* public/scss",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
-    "classnames": "^2.3.2",
-    "material-symbols": "^0.14.5",
+    "@raspberrypifoundation/design-system-core": "^2.0.0",
+    "classnames": "^2.5.1",
+    "material-symbols": "^0.27.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.9",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-vitest-globals": "^1.5.0",
+    "globals": "^15.12.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.24.0"
+    "sass-embedded": "^1.83.1",
+    "storybook": "^8.4.7",
+    "vite": "^6.1.0",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
     "react-router-dom": "^6.24.0"
+  },
+  "packageManager": "yarn@4.5.1",
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }